環境変数 (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>