Day20 - 提开发者体验 (DX)，使用 path alias

前言

今天我想来点轻松的议题，是一个大家在开发专案时都会遇到的状况。在开发时有时候资料夹结构会变得很深，想要拿到外部的档案时以相对路径的方式会很麻烦：

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