绝对导入和模块路径别名

示例

绝对导入和别名

Next.js 内置支持 tsconfig.json 和 jsconfig.json 文件中的 "paths" 和 "baseUrl" 选项。

这些选项允许你为项目目录设置绝对路径别名，从而更容易导入模块。例如：

// 之前
import { Button } from "../../../components/button";
 
// 之后
import { Button } from "@/components/button";

小贴士：create-next-app 会提示你配置这些选项。

绝对导入

baseUrl 配置选项允许你直接从项目根目录导入。

以下是这种配置的示例：

tsconfig.json

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

components/button.tsx

export default function Button() {
  return <button>点击我</button>;
}

components/button.js

export default function Button() {
  return <button>点击我</button>;
}

app/page.tsx

import Button from "components/button";
 
export default function HomePage() {
  return (
    <>
      <h1>你好，世界</h1>
      <Button />
    </>
  );
}

app/page.js

import Button from "components/button";
 
export default function HomePage() {
  return (
    <>
      <h1>你好，世界</h1>
      <Button />
    </>
  );
}

模块别名

除了配置 baseUrl 路径外，你还可以使用 "paths" 选项来为模块路径设置"别名"。

例如，以下配置将 @/components/* 映射到 components/*：

tsconfig.json

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

components/button.tsx

export default function Button() {
  return <button>点击我</button>;
}

components/button.js

export default function Button() {
  return <button>点击我</button>;
}

app/page.tsx

import Button from "@/components/button";
 
export default function HomePage() {
  return (
    <>
      <h1>你好，世界</h1>
      <Button />
    </>
  );
}

app/page.js

import Button from "@/components/button";
 
export default function HomePage() {
  return (
    <>
      <h1>你好，世界</h1>
      <Button />
    </>
  );
}

每个 "paths" 都是相对于 baseUrl 位置的。例如：

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

app/page.tsx

import Button from "@/components/button";
import "@/styles/styles.css";
import Helper from "utils/helper";
 
export default function HomePage() {
  return (
    <Helper>
      <h1>你好，世界</h1>
      <Button />
    </Helper>
  );
}

app/page.js

import Button from "@/components/button";
import "@/styles/styles.css";
import Helper from "utils/helper";
 
export default function HomePage() {
  return (
    <Helper>
      <h1>你好，世界</h1>
      <Button />
    </Helper>
  );
}