basePath

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

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

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

知っておくと良い: この値はビルド時に設定する必要があり、クライアントサイドのバンドルにインライン化されているため、再ビルドなしで変更することはできません。

リンク

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

例えば、/about を使用すると、basePath が /docs に設定されている場合、自動的に /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 を追加する必要があります。

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

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