Next.js 9.4のリリース以降、環境変数の追加がより直感的で、自然に行えるようになりました。試してみてください!
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>;