React Next.js 如何設定路徑別名 alias

我們知道專案的一些基本設定，通常都會需要寫在某個 config 檔案中，但是創建 next.js 的專案時，初始他不會自動幫你產生 config 檔，所以我們要自己創建。

在根目錄建立config檔案

可以參考官網的詳細說明。

如果你使用的是 Typescript，那你要創建的檔名就要做tsconfig.json，如果你是寫一般的 js，那你要創建的檔名就叫做jsconfig.json。

但是不管你是哪個檔案，內容都是一樣ＸＤ如下：

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

此時原本你引入檔案的檔名可能是：

import styles from "../styles/Home.module.css";

就可以改成：

import styles from "styles/Home.module.css";

設定別名

如果你有習慣用一些別名，你也可以多設定一些 path，但是要記得因為 baseUrl 已經改成在根目錄（".")，所以你別名的路徑也要依照根目錄來寫。（就跟你在一般檔案裡的路徑一樣）

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/style/*": ["style/*"]
    }
  }
}

這樣你在檔案中引用就會變成：

import styles from "@/styles/Home.module.css";

是不是覺得跟上面比，好像其實只要設定baseUrl就好了？

我個人是覺得拉，別名比較適合用在你的專案有很多層資料夾，像是utils/enums/user.js，那你就可以把別名取做@/userEnum/*，好像就有方便一點ＸＤＤ？