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