環境変数

Next.js 9.4のリリース以降、環境変数の追加がより直感的で、自然に行えるようになりました。試してみてください！

例

• envのみ

JavaScript バンドルに環境変数を追加するには、next.config.jsを開き、envの設定を追加します:

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

そうすると、process.env.customKeyを使用できるようになります。 例:

function Page() {
  return <h1>カスタムキーの値は: {process.env.customKey}</h1>;
}

export default Page;

Next.js はビルド時に process.env.customKey を 'my-value' に置き換えます。 Webpack DefinePluginの性質上、process.env の変数を上書きしようとしてもうまくいきません。

例えば、下記のような環境変数は:

return <h1>カスタムキーの値は: {process.env.customKey}</h1>;

最終的にこうなります:

return <h1>カスタムキーの値は: {'my-value'}</h1>;

関連事項