JUNのブログ

JUNのブログ

活動記録や技術メモ

Next.js で.envからいい感じに環境変数を読み込みたい

Next.js で .env ファイルから環境変数を読み込んで使う時にちょっと迷ったのでやり方をメモ代わりに書いとく.

やり方

基本的なやり方は

  1. dotenvでサーバー起動時に.envファイルから環境変数を自動的に読み込む.
  2. 読み込んだ環境変数を next.config.js で設定して Next.js の中で使えるようにする

って感じ.

実際にやってみる

Next.js のアプリケーションは既にある前提でやります.

まず dotenv を追加

yarn add dotenv

プロジェクトルートの.envファイルに適当に環境変数のキーバリューのセットを書いとく

ADMIN_API_HOST=127.0.0.1:8080

プロジェクトルートに next.config.js というファイルを作って以下のような内容にする.

require('dotenv').config();
module.exports = {
  env: {
    // Reference a variable that was defined in the .env file and make it available at Build Time
    ADMIN_API_HOST: process.env.ADMIN_API_HOST,
  },
}

これでNext.jsのアプリケーション内から値を読めるようになった.

使う時は process.env.ADMIN_API_HOST みたいな感じで値にアクセスできる.