Written by
on March 6, 2020

Next.jsでNODE_ENVによってAPIリクエスト先を変える

Tags:

フロントエンドのアプリケーションを書いていると、プロダクション環境と開発環境でAPIの接続先を変えたい時があると思います。 Next.jsには環境変数をビルド時に埋め込むことができ、プロダクション環境と開発環境でAPIの接続先を変えることができます。本ブログではNext.jsアプリケーションでどのように環境変数を埋め込むかをサンプルを交えて説明します。

Next.jsで環境変数を使う

Next.jsでは環境変数の値をビルド(next build)時にコードに埋め込んでくれます。 https://nextjs.org/docs/api-reference/next.config.js/environment-variables

この機能とは別にRuntimeConfigurationというものもあり、こちらはビルド時ではなく、実行時に値が動的に変更されます。本ブログではRuntimeConfigurationの説明はしません。 Next.jsで設定したい環境変数はnext.config.jsに記述します。 Next.jsのドキュメントでは以下の例がありました。

next.config.js

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

function Page() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>
}

export default Page

この例はnext.config.jsにenvのvalueとして { customKey: ‘my-value’ } を設定しています。こうすることでビルド時に、コード内に出てくるとprocess.env.customKeyがmy-valueで置き換えられます。今回の例ではページに出てくるprocess.env.customKeyの値がmy-valueで置き換えられ、The value of customKey is: my-valueという文字列がページに表示されます。さて、これで環境変数をコード内に埋め込む方法がわかりました。次はNODE_ENVによって環境変数を変更する方法について説明します。

NODE_ENVの値によって環境変数を変える

next.config.jsはjsファイルなので変数が利用できます。同様にif文や三項演算子も利用できるので、以下のようにNODE_ENVによって分岐する処理を書いてあげればNODE_ENVの値によって埋め込む環境変数を変更できます。

const isProd = process.env.NODE_ENV === "production";
module.exports = {
  env: {
    customKey: isProd ? "prod-value" : "dev-value"
  },
}

function Page() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>
}

export default Page

この状態でnext buildするとThe value of customKey is: dev-valueが表示され、NODE_ENV=production next buildとするとThe value of customKey is: prod-valueが表示されます。

NODE_ENVの値によってAPIの接続先を変更する

さてここまでで、NODE_ENVの値によって環境変数を変えることができました。あとはこの値を使ってAPIリクエストを投げるだけです。今回の例ではHTTPクライアントとしてAxiosを利用します。まずは環境変数の設定です。

const isProd = process.env.NODE_ENV === "production";
module.exports = {
  env: {
    server: isProd ? "https://production-server.com" : "http://localhost:3000"
  },
}

NODE_ENVがproductionの時はhttps://production-server.comの値になり、それ以外のときはhttp://localhost:3000になります。この値をAxiosで使います。

import axios from "axios";

const resolvedServer = (() => {
  if (process.env.Server) {
    return process.env.Server;
  }
  return "http://localhost:3000";
})();

export const Axios = axios.create({
  baseURL: resolvedServer,
  timeout: 5000
});

resolvedServerは即時実行関数によって、serverのURLの値が入ってきます。即時実行関数にしておくことによって、何度も関数が実行されずに済みます。

const resolvedServer = (() => {
  if (process.env.Server) {
    return process.env.Server;
  }
  return "http://localhost:3000";
})();

if文を使って、process.env.Serverがある場合はその値を使い、なければhttp://localhost:3000の値をセットしています。テスト時にはNext.jsの環境変数の埋め込みは行われないため、デフォルト値としてhttp://localhost:3000セットしています。

Axiosではcreateメソッドを使うことで、独自の設定をセットしたインスタンスを作成できます。

export const Axios = axios.create({
  baseURL: resolvedServer,
  timeout: 5000
});

あとはAPIリクエストしたいところで、このAxiosインスタンスをimportして、getやpostなどのメソッドを呼び出すだけです。 Axios.get(/hoge)とするとhttps://production-server.com/hogeやhttp://localhost:3000/hogeといったエンドポイントにリクエストが投げられます。

まとめ

next.config.jsに値を書くことによって環境変数を利用することができる。
process.env.xxxxとコード内に書くことによってビルド時に値が埋め込まれる。
Axiosのcreateメソッドを利用することでbaseURLをセットしたインスタンスを作成できる。

以上です。

Next.jsでNODE_ENVによってAPIリクエスト先を変える

Tags:

Next.jsで環境変数を使う

NODE_ENVの値によって環境変数を変える

NODE_ENVの値によってAPIの接続先を変更する

まとめ

See Also