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

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


在根目錄建立config檔案

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

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

但是不管你是哪個檔案,內容都是一樣XD如下:

{
  "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/*,好像就有方便一點XDD?

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。