basePath

若要將 Next.js 應用程式部署在網域的子路徑下，您可以使用 basePath 配置選項。

basePath 允許您為應用程式設定路徑前綴。例如，要使用 /docs 而非預設的 '' (空字串)，請開啟 next.config.js 並新增 basePath 配置：

next.config.js

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

須知事項：此值必須在建置時設定，且無法在不重新建置的情況下變更，因為該值會被內嵌到客戶端套件中。

連結

當使用 next/link 和 next/router 連結到其他頁面時，basePath 會自動套用。

例如，當 basePath 設定為 /docs 時，使用 /about 會自動變成 /docs/about。

export default function HomePage() {
  return (
    <>
      <Link href="/about">關於頁面</Link>
    </>
  )
}

輸出的 html：

<a href="/docs/about">關於頁面</a>

這確保您在變更 basePath 值時，無需更改應用程式中的所有連結。

圖片

當使用 next/image 元件時，您需要在 src 前面加上 basePath。

例如，當 basePath 設定為 /docs 時，使用 /docs/me.png 將正確提供您的圖片。

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

連結

圖片

On this page