【Next.js和訳】API Reference/next.config.js/Base Path

この記事について

この記事は、next.config.js/Base Pathの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Base Path

バージョン履歴

バージョンの変更点
v9.5.0 ベースパスが追加されました。

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">
        <a>About Page</a>
      </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>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