︙

env

Next.js 9.4 のリリース以来、 environment variables を追加するためのより直感的で人間工学に基づいた経験が提供されるようになりました。ぜひ試してみてください！

Good to know: この方法で指定された environment variables は、常にJavaScript バンドルに含まれます。環境 variable 名にNEXT_PUBLIC_を接頭辞として追加することは、それらを環境または.env ファイルを通じて指定するときにのみ効果があります。

JavaScript バンドルに environment variables を追加するには、next.config.jsを開き、env 設定を追加します：

next.config.js

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

これで、あなたの code 内で process.env.customKey にアクセスできます。例えば:

function Page() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>;
}

export default Page;

Next.js は build 時間にprocess.env.customKeyを'my-value'で replace。process.env変数のデストラクチャリングは、webpack DefinePlugin の性質により動作しません。

例えば、以下の行：

return <h1>The value of customKey is: {process.env.customKey}</h1>;

結果的には:

return <h1>The value of customKey is: {"my-value"}</h1>;