環境変数 (env)

Next.js 9.4のリリース以降、環境変数の追加がより直感的でエルゴノミックな体験になりました。ぜひお試しください！

サンプル

補足: この方法で指定された環境変数は常に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>customKeyの値は: {process.env.customKey}</h1>
}

export default Page

Next.jsはビルド時にprocess.env.customKeyを'my-value'に置き換えます。webpackのDefinePluginの性質上、process.env変数の分割代入は機能しません。

例えば、次の行:

return <h1>customKeyの値は: {process.env.customKey}</h1>

は最終的に次のようになります:

return <h1>customKeyの値は: {'my-value'}</h1>