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>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>