env

Next.js 9.4のリリース以来、環境変数をより直感的かつ人間工学的に追加できるようになりました。ぜひお試しください！

例

With env

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'に置き換えます。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>