配置和别名

别名

绝对地址导入和模块路径别名

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

这些配置会帮助你更方便的导入模块,举个例子:

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

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

绝对地址导入

baseUrl配置项可以让你从项目根目录中直接导入。使用示例如下：

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

我们声明 baseUrl 为 "."，也就是项目根目录。现在我们在根目录下的 components文件夹下新建一个组件：

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

现在我们导入该组件不需要再使用相对地址了, 当嵌套多层引入组件就会很方便:

// app/page.js
import Button from "/components/button";

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

模块别名

除了配置 baseUrl 路径之外，你也可以设置 "paths" 选项实现路径别名。举个例子：

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

在这个例子中，我们设置了一个路径映射，@/components/* 到 components/*

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

现在我们不需要使用相对地址，使用设置的路径别名即可：

// app/page.js
import Button from "@/components/button";

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

那 baseUrl 和 paths:是什么关系呢？事实上，paths 中的地址是相对于 baseUrl 的，举个例子：

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

结果

// pages/index.js
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>
  );
}

@/components/button最终的地址其实是 src/components/button，其他地址同理。

src 目录

至今我们都是把代码放在根目录下的 app 或 pages 目录下，但 Next.js 也支持 src 目录，将代码放在 src 目录下有助于实现应用程序代码和项目配置文件（多在项目根目录）分离。

使用 src 目录，将 app 下或者 pages 下的文件移动到 src/app 或 src/pages 即可：

注意

注意

/public 目录继续放在项目根目录
package.json、next.config.js、tsconfig.json 等配置文件继续放在项目根目录
.env.\* 文件继续放在项目根目录
如果 app 或者 pages 在根目录下存在，src/app 或 src/pages 会被忽略。
如果你正在使用 src，你可能还需要移动其他应用文件夹，如 /components 或 /lib
如果你正在使用中间件，确保它放在 src 目录下
如果你正在使用 Tailwind CSS，别忘了修改 tailwind.config.js 中的 content 配置项：

代码

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  // ...
};

使用外部的 Link 和 script

在 layout.js 下面添加 head 里面的 link 和 script

import "./globals.css";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <link
          href="https://www.xxxxx.com/statics/css/reset.css?v=1756710823"
          rel="stylesheet"
        />
        <script src="https://www.xxxxxx.com/statics/js/tool.js?t=1756710823"></script>
      </head>
      <body>{children}</body>
    </html>
  );
}

TDK

静态元数据

要定义一个静态元数据，需要从 layout.js 或者 page.js 文件中导出一个 Metadata 对象：

每个页面都可以设置

export const metadata = async () => {
  let title = "222";
  let keywords = ["222", "页面"];
  let description = "222页面描述";

  title = await new Promise((resolve) => {
    setTimeout(() => {
      resolve("延迟的标题23232");
    }, 2000);
  });

  return {
    title,
    keywords,
    description,
  };
};

function Page() {
  return (
    <>
      <div>
        <div>DashBoard子页面</div>
      </div>
    </>
  );
}

export default Page;

配置 和 别名 ​

别名 ​

绝对地址导入和模块路径别名 ​

绝对地址导入 ​

模块别名 ​

src 目录 ​

使用外部的 Link 和 script ​

TDK ​

静态元数据 ​