More than 5 years have passed since last update.

【React / Next.js】環境変数を呼び出せなくてハマった

Posted at 2021-08-14

はじめに

普通のReactとNext.jsで環境変数の設定方法が異なることを知らず、APIキーを呼び出せずハマってしまった。

かなり初歩的です。

まず、プロジェクトのルートディレクトリに.envファイルを作成する。
（.gitignoreに記述してgit管理外にしておく）

APIKEYを設定する例としてます。

環境変数定義の際、変数名の最初にREACT_APP_をつける

..env

REACT_APP_APIKEY="xxxxxxxxxxxxxxxxxxxxxxx"

環境変数定義の際、変数名の最初にNEXT_PUBLIC_をつける

..env

NEXT_PUBLIC_APIKEY="xxxxxxxxxxxxxxxxxxxxxxx"

Reactの場合でもNext.jsの場合でもprocess.env.環境変数名で呼び出す。

..js

const apiKey = process.env.REACT_APP_APIKEY;

..js

const apiKey = process.env.NEXT_PUBLIC_APIKEY;

Next.jsのプロジェクトでREACT_APP_を使ってしまい、APIに接続できずに悩みました...

参考になる詳しい記事がたくさんありました。
ありがとうございました。