env | Next.js - 日本語

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>