🚀
【Next.js和訳】API Reference/next.config.js/Environment Variable
この記事について
この記事は、next.config.js/Environment Variableの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
環境変数
例
JavaScript バンドルに環境変数を追加するには、next.config.js
を開き、env
設定を追加します。
module.exports = {
env: {
customKey: "my-value",
},
}
これで、コードの中でprocess.env.customKey
にアクセスできるようになります。例えば、以下のようになります。
function Page() {
return <h1>The value of customKey is: {process.env.customKey}</h1>
}
export default Page
Next.js は、ビルド時にprocess.env.customKey
をmy-value
に置き換えます。webpack DefinePluginの性質上、process.env
変数を再構築しようとしてもうまくいきません。
たとえば、次のような行があります。
return <h1>The value of customKey is: {process.env.customKey}</h1>
になってしまいます。
return <h1>The value of customKey is: {"my-value"}</h1>
関連
Discussion