basePath

ドメインのサブパス下にNext.jsアプリケーションをデプロイするには、basePath設定オプションを使用できます。

basePathにより、アプリケーションのパスプレフィックスを設定できます。例えば、デフォルト値の''（空文字列）の代わりに/docsを使用するには、next.config.jsを開き、basePath設定を追加します：

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

補足: この値はビルド時に設定する必要があり、値がクライアントサイドのバンドルにインライン化されるため、再ビルドせずに変更することはできません。

リンク

next/linkとnext/routerを使用して他のページにリンクする場合、basePathは自動的に適用されます。

例えば、basePathが/docsに設定されている場合、/aboutは自動的に/docs/aboutになります。

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

出力されるHTML：

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

これにより、basePathの値を変更しても、アプリケーション内のすべてのリンクを変更する必要がなくなります。

画像

next/imageコンポーネントを使用する場合、srcの先頭にbasePathを追加する必要があります。

例えば、basePathが/docsに設定されている場合、/docs/me.pngを使用すると画像が適切に提供されます。

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