🚀
【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
Discussion