[Next.js]next.config.jsに記載したenvが反映されなくてハマった話

React
2020.09.28

Next.jsにはnext.config.jsに環境変数を記述することが出来ます。
これを使用すると、development環境とproduction環境で参照する値を変更することが出来るので、便利です。
先日、nextjsで環境変数を定義するために、next.config.jsに以下のとおり、API_SERVERを定義していました。

const {
  PHASE_PRODUCTION_BUILD,
} = require("next/constants");

module.exports = (phase) => {
  const isProd =
    phase === PHASE_PRODUCTION_BUILD && process.env.STAGING !== "1";
  return {
    env: {
      API_SERVER: isProd
        ? "https://api-server.com"
        : "http://localhost:3000",
    },
    distDir: "build",
  };
};

事前にyarn devをしてホットリロードを有効にしていたので、試しにconsole.logでprocess.env.API_SERVERを参照しようとしましたが、undefinedで参照出来ませんでした。

buildは成功しているので、できそうですが、yarn devを一回停止して、再度起動するとうまく参照できました。

よく見たら以下のメッセージが出ていました。

> Found a change in next.config.js. Restart the server to see the changes in effect.

コメント