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' に置き換えます。process.env 変数を分割代入しようとすると、webpack の DefinePlugin の性質上、機能しません。

例えば、以下の行は

return <h1>The value of customKey is: {process.env.customKey}</h1>

最終的に以下のようになります

return <h1>The value of customKey is: {'my-value'}</h1>