Zenn
🌏

Next.jsの環境変数取得方法

2021/07/05に公開
Next.js
tech

Nextjsでは、たとえばデータベースに接続するときに使う環境変数を設定することができます。
設定方法は、ルートディレクトリ直下にあるnext.config.jsにあるmodule.exports...とあるところに変数を追加すればOKです。(ファイルがなければnext.config.jsをルート直下に作ってください)

next.config.js
module.exports = {
  env: {
    // customKeyは任意の変数名でOK
    // 'my-value'のところで値を設定する
    customKey: 'my-value',  
  },
};

値を取得する場合は下記のようにprocess.envを使います。
(customKeyのところは設定した変数名に変えてください。)

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

動作環境

Nextjs 9.4以降(11.0.0で動作確認済み)

参考 URL

環境変数について

next.config.jsについて

GitHubで編集を提案

Discussion