基本路径

要将 Next.js 应用部署在域名的子路径下，可以使用 basePath 配置选项。

basePath 允许你为应用设置路径前缀。例如，要使用 /docs 而不是 ''（空字符串，默认值），打开 next.config.js 并添加 basePath 配置：

next.config.js

module.exports = {
  basePath: "/docs",
};

值得注意的是：此值必须在构建时设置，且无法在不重新构建的情况下更改，因为该值会内联在客户端包中。

链接

当使用 next/link 和 next/router 链接到其他页面时，basePath 会自动应用。

例如，使用 /about 会自动变为 /docs/about 当 basePath 设置为 /docs 时。

export default function HomePage() {
  return (
    <>
      <Link href="/about">关于页面</Link>
    </>
  );
}

输出 HTML：

<a href="/docs/about">关于页面</a>

这确保了你不必在更改 basePath 值时更改应用中的所有链接。

图片

当使用 next/image 组件时，你需要在 src 前添加 basePath。

例如，使用 /docs/me.png 会在 basePath 设置为 /docs 时正确提供你的图片。

import Image from "next/image";
 
function Home() {
  return (
    <>
      <h1>我的主页</h1>
      <Image
        src="/docs/me.png"
        alt="作者的照片"
        width={500}
        height={500}
      />
      <p>欢迎来到我的主页！</p>
    </>
  );
}
 
export default Home;