typescript Detailed steps for configuring alias

1 Installation dependencies

npm install --save-dev babel-plugin-module-resolver
# yarn add babel-plugin-module-resolver --dev

Add. babelrc file to root directory

Refer to the following contents to modify according to the needs in your project

{
 "presets": ["next/babel"],
 "plugins": [
  [
   "module-resolver",
   {
    "alias": {
     "@/actions": "./actions",
     "@/components": "./components",
     "@/constants": "./constants",
     "@/pages": "./pages",
     "@/public": "./public",
     "@/reducers": "./reducers",
     "@/utils": "./utils"
    }
   }
  ]
 ]
}

Modify the tsconfig. json file

{
 "compilerOptions": {
  "baseUrl": "./",
  "paths": {
   "@components/*": ["./components/*"],
   "@pages/*": ["./pages/*"],
   "@public/*": ["./public/*"]
  }
 }
}

Note "baseUrl": "./", cannot be omitted, otherwise ts will report Option 'paths' cannot be used without specifying '-baseUrl' option. Error

You can also refer to the above steps for configuring alias in next. js