︙

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