configuration module path alias

Author: raduwen

pages/_app.tsx

@@ -1,4 +1,4 @@
-import '../styles/global.css'
+import '@/styles/global.css';
 
 export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

pages/index.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import Head from 'next/head';
 
-import TextWidget from '../components/TextWidget'
-import TimeWidget from '../components/TimeWidget'
+import TextWidget from '@/components/TextWidget';
+import TimeWidget from '@/components/TimeWidget';
 
 const IndexPage = () => {
   const text = `オレオレOBSウィジュエットの整理`;

tsconfig.json

@@ -16,7 +16,11 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["*"]
+    }
   },
   "include": [
     "next-env.d.ts",