概要 SPA構成のシステムを開発する際に、本番環境や開発環境によってAPIのURLが変わるので、それを環境ごとに切り替えたい!ってことよくありますよね。 こういう場合は環境変数を用いて使用するURLを切り替えるのがオーソドックスなのですが、Next.jsだと環境変数の取り扱いが少し変わってくるので、それを今回まとめてみました! やりたいこと 以下の3種類の環境のAPIを用意しています。 1. 本番環境用のAPI (production) 2. 開発環境用のAPI (development) 3. 開発環境用のモックAPI (swagger) 3つ目のモックAPIはOpenAPI(swagger)と呼ばれるもので、スキーマを用いてAPIを定義するだけで擬似的にAPIを使用することができます。 サーバーサイドのAPIの開発を待ってからフロントのAPI関連の実装をすると効率が悪いので、swagg