基本路径

Version History| Version | Changes | | :--- | :--- | | v9.5.0| Base Path added. |

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

basePathallows you to set a path prefix for the application. For example, to use /docsinstead of /(the default), open next.config.jsand add the basePathconfig:

module.exports = {
  basePath: '/docs',
}

Note: this value must be set at build time and can not be changed without re-building as the value is inlined in the client-side bundles.

Links

When linking to other pages using next/linkand next/routerthe basePathwill be automatically applied.

For example, using /aboutwill automatically become /docs/aboutwhen basePathis set to /docs.

export default function HomePage() {
  return (
    <>
      <Link href="/about">
        <a>About Page</a>
      </Link>
    </>
  )
}

Output html:

<a href="/docs/about">About Page</a>

This makes sure that you don't have to change all links in your application when changing the basePathvalue.

Images

When using the next/image component, you will need to add the basePathin front of src.

For example, using /docs/me.pngwill properly serve your image when basePathis set to /docs.

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/docs/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home