env

Next.js 9.4のリリース以降、環境変数を追加するための、より直感的で使いやすい体験が提供されるようになりました。ぜひ試してみてください！

Good to know: この方法で指定された環境変数は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'に置き換えます。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>