【Next.js】クライアントサイドで環境変数が使えない時

はじめに

開発をしている時に.envに記載した環境変数が読み込めなかったのでメモ

環境変数とは

本番や開発など、環境ごとに中身を変えたい変数のこと。
環境変数を用いることで同じ記述のまま値の出しわけができる。

対策

変数名の先頭にNEXT_PUBLIC_ をつける必要がある。
Next.jsのルールで先頭に付与しないと認識されないようです。

NEXT_PUBLIC_API_KEY='DUMMY_KEY'

参考