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>