Vercelで設定した環境変数をNext.jsで受け取る方法

こんにちは。LiSMOtechの小谷です。

今回はVercelとNext.jsを使用した時の環境変数の設定および取得方法についてです。

開発中に環境に応じて、切り分けを行いたいときに使用する環境変数！

これをVercelとNext.jsで扱うにはどうしたらいいのか見ていきましょう。

また、以前の記事でもNext.jsを紹介しているので、Next.jsに興味のある方は是非読んで見てください！

Next.jsでAPI連携してみよう

Next.jsのチュートリアルをやってみた

Next.jsをVercelでデプロイ！

【Next.js】APIルーティングを作成する

※今回はVercelとNext.jsの環境が整っている前提で話を進めていきます。整っていない方は上記の記事などを参考にして整えて下さい。

Vercelで環境変数を設定する

まずは、Vercerlのダッシュボードから環境変数の設定を行なっていきましょう。

①任意のプロジェクトのダッシュボードを開きます

②設定画面を開く

③環境変数(Enviroment Variables)の設定を開く

④任意のKeyとValueを設定して、適用させる環境にチェックを入れ、Saveボタンを押しましょう。

今回はドメインを変数の値として設定し、開発中の環境(Development)かVercel環境(Preview, Production)か分けるため、DOMAIN_NAMEとしました。

設定した値を確認する

①Vercelでの環境変数設定の確認
設定が完了すると、環境変数設定画面の下部に設定の一覧が出ますので、確認しましょう。
今回はDOMAIN_NAMEという名前で開発中の環境(Development)かVercel環境(Preview, Production)かに応じて値を2つ設定しました。

②Next.jsでの環境変数設定の確認
環境変数の参照は

process.env.DOMAIN_NAME

とするとできるのですが、環境変数はサーバーサイドでNode.js実行時で注入されるため、クライアント側では読み取れないです。
なので、Next.jsのサーバサイドの処理(SSR)を行うgetServerSideProps内に以下のように書いて、コンソールログに出して確認してみます。

export const getServerSideProps = async() => {
  console.log('環境変数:', process.env.DOMAIN_NAME);
}

として、ローカルでNext.jsを立ち上げてターミナルを確認してみます。

のように出てきて、読み取りができてそうです。

また、このように書き換えたものをVercelにアップロードして、確認してみましょう。

Vercel側のログはダッシュボードのLogsから確認できます。

こちらは先ほど設定したVercel環境でのドメイン名がきちんと出てきていて、問題なさそうですね。

Next.jsで受け取る

では、最後に設定した環境変数の値をNext.jsで受け取って、getServerSideProps外でも使えるようにしていきましょう。

先ほどのコードでサーバサイド側の処理のgetServerSidePropsでは環境変数を取得はできていたので、あとはこれに追記をして環境変数をpropsとしてクライアント側に渡してあげれば良さそうですね。

具体的には以下のようになると思います。

export const getServerSideProps = async() => {
  const domain = process.env.DOMAIN_NAME;
  return{
    props: {
      domain,
    }
  }
}

これで、propsにも渡せたので、Next.js内のいろんな箇所に展開できますね！

まとめ

今回はVercelでの環境変数の設定方法を見ていき、その値を実際Next.js側でも確認し、Next.js内のコードでも使えるようにしていく方法を紹介しました！

実際の開発では、こういった設定も必要となる場合もあるので、VercelとNext.jsの組み合わせで使用するなら覚えておきたいですね。