前言

今天我想來點輕鬆的議題，是一個大家在開發專案時都會遇到的狀況。在開發時有時候資料夾結構會變得很深，想要拿到外部的檔案時以相對路徑的方式會很麻煩：

import Button from "../../../../components/Button";

在 Next.js 的其中一個常見的習慣是會有 pages/ 跟 components/ 資料夾， pages/ 放的是一個頁面的進入點，有些頁面中會使用的元件會放在 components/ 的資料夾中，這時不論是 pages/ 的資料夾很深，或者是 components/ 很深，在使用一些其他的元件以相對路徑 import 就會有不方便的情況發生。

在幾年前這是比較麻煩的情況，但是現在 2021 年， Next.js 已經非常容易做到 path alias 的設定，讓 import 事半功倍。

在 tsconfig 中設定 baseUrl

現在新建立 Next.js 專案的預設資料夾結構 pages/ 會被放在根目錄，但是如果是從其他專案 migrate 到 Next.js，或是團隊有習慣的專案資料夾結構，我們會需要在 tsconfig 設定專案的 baseUrl 。

如果以 Next.js 的專案來說，會設定 baseUrl: '.' ：

baseUrl
├── components
│   └── Button.tsx
├── pages
├── tsconfig.json
└── blablala...

在這樣設定的情況下，你可以使用絕對路徑 import Button：

import Button from "components/Button";

而且如果你使用的是 VS Code 開發，甚至在輸入 import 的程式碼時就會建議你可以使用哪個路徑：

Path alias

接下來延續上面的設定， baseUrl 只能指定一個路徑，但是一定有些時候，會想要有不同的路徑可以使用，以上面 components/Button.tsx 這個簡單的例子來說，會是以下設定：

{
  "baseUrl": ".",
  "paths": {
    "@/components/*": ["components/*"],
    "@/lib/*": ["lib/*"]
  }
}

在這樣設定的情況下，你可以使用 path alias：

import Button from "@/components/Button";

在新增了 paths 這個設定之後，VS Code 建議的路徑就會是 paths 的設定：

另一種資料結構的案例

如果是從 CRA 移植過的來專案，也許專案結構會是把檔案放在 src 的資料夾中，如果重新定義資料夾結構也許會有點麻煩，或是破壞原本團隊的習慣，因此 Next.js 目前在預設的情況下就支援了 src 的資料夾結構，所以可以放心的把 pages/ 跟一些其他的檔案都放在 src 資料夾中。

└── src (baseUrl)
    ├── components
    │   └── Button.tsx
    └── pages
        └── index.tsx

在這種情況下，我們會需要修改 tsconfig.json 中的 baseUrl 為 ./src ，但是 paths 的設定不用改變，就可以使用 path alias：

{
  "baseUrl": "./src",
  "paths": {
    "@/components/*": ["components/*"],
    "@/lib/*": ["lib/*"]
  }
}

Reference

• https://github.com/vercel/next.js/issues/10929
• https://nextjs.org/docs/advanced-features/module-path-aliases
• https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
• https://nextjs.org/docs/advanced-features/src-directory