绝对导入和模块路径别名

例子

• 绝对导入和别名

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

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

// before
import { Button } from "../../../components/button";

// after
import { Button } from "@/components/button";

您需要知道: create-next-app将会提示您配置这些选项。

绝对导入

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

这个配置的一个例子:

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

export default function Button() {
  return <button>Click me</button>;
}

export default function Button() {
  return <button>Click me</button>;
}

import Button from "components/button";

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  );
}

import Button from "components/button";

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  );
}

模块别名

除了配置baseUrl路径之外，您还可以使用"paths"选项来"alias"模块路径。

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

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

export default function Button() {
  return <button>Click me</button>;
}

export default function Button() {
  return <button>Click me</button>;
}

import Button from "@/components/button";

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  );
}

import Button from "@/components/button";

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  );
}

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

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

import Button from "@/components/button";
import "@/styles/styles.css";
import Helper from "utils/helper";

export default function HomePage() {
  return (
    <Helper>
      <h1>Hello World</h1>
      <Button />
    </Helper>
  );
}

import Button from "@/components/button";
import "@/styles/styles.css";
import Helper from "utils/helper";

export default function HomePage() {
  return (
    <Helper>
      <h1>Hello World</h1>
      <Button />
    </Helper>
  );
}