︙

basePath

ドメインのサブ path の下に Next.js アプリケーションを deploy するには、basePath config オプションを使用できます。

basePathはアプリケーションの path プレフィックスを設定することを可能にします。例えば、'' (empty string、default)の代わりに/docsを使用するには、next.config.jsを開き、basePath config を追加します：

next.config.js

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

Good to know：この value は build 時に設定する必要があり、client 側のバンドルに value がインライン化されているため、再 build せずに変更することはできません。

Links

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の value を変更する際に、アプリケーション内のすべてのリンクを変更する必要がなくなります。

Images

next/image component を使用する際には、srcの前にbasePathを追加する必要があります。

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

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;