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>