🚀
【Next.js和訳】API Reference/next.config.js/Environment Variable
この記事について
株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。
この記事は、next.config.js/Environment Variableの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
環境変数
Next.js 9.4では、環境変数の追加がより直感的で分かりやすくなりました。ぜひ試してみてください。
例
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