introduction

从9.5.0开始,Base Path 增加 ..

为了部署一个Next.js 应用在一个域名的子路径下,你能够使用basePath配置选项

basePath允许你能够设置一个应用的路径前缀,举个例子,使用/docs替代/(默认),打开next.config.js并增加 basePath配置

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

注意: 这个值必须在构建时设置并且不能够改变(在运行时),因为这个值内链到了客户端打包中 …

Links

当我们使用next/link以及 next/router链接到其他页面将自动的应用basePath

举个例子,假设我们使用/about将自动的转换为/docs/about,当basePath设置为/docs

  1. export default function HomePage() {
  2.   return (
  3.     <>
  4.       <Link href="/about">
  5.         <a>About Page</a>
  6.       </Link>
  7.     </>
  8.   )
  9. }

输出的HTML 

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

确保你改变basePath的值得时候不需要改变应用中的所有链接 ..

图片

当使用next/image组件的时候,你需要增加basePath到src的前面 ..

例如: 使用/docs/me.png将正确的提供你的图片(当basePath设置为/docs

  1. import Image from 'next/image'
  3. function Home() {
  4.   return (
  5.     <>
  6.       <h1>My Homepage</h1>
  7.       <Image
  8.         src="/docs/me.png"
  9.         alt="Picture of the author"
  10.         width={500}
  11.         height={500}
  12.       />
  13.       <p>Welcome to my homepage!</p>
  14.     </>
  15.   )
  16. }
  18. export default Home

但是这种提供静态文件的方式,还需要硬编码基础路径,这很难接受,我们可以使用环境变量替换 …