env

Next.js 9.4のリリース以降、より直感的で人間工学に基づいた環境変数の追加エクスペリエンスを提供しています。ぜひお試しください！

重要な点: この方法で指定された環境変数は**常に**JavaScriptバンドルに含まれます。環境変数名を`NEXT_PUBLIC_`で始めることは、環境または.envファイルを通じて指定する場合のみ有効です。

環境変数をJavaScriptバンドルに追加するには、`next.config.js`を開き、`env`設定を追加します。

next.config.js

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>

役に立ちましたか？