メインコンテンツまでスキップ

basePath

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

basePathでは、アプリケーションのパスの接頭辞を設定できます。たとえば、''(デフォルトの空文字列)の代わりに/docsを使用するには、next.config.jsを開き、basePath設定を追加します:

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

Good to know: この値はビルド時に設定する必要があり、クライアント側のバンドルにインライン化されているため、変更するには再ビルドする必要があります。

next/linknext/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