env

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

重要: この方法で指定された環境変数は、常に JavaScript バンドルに含まれます。環境変数名を NEXT_PUBLIC_ でプレフィックスすることは、環境または .env ファイルを通じて指定した場合にのみ効果があります。

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>