Gatsbyで環境変数を使用する方法です。
Gatsbyではdotenvが使えるようになっているので簡単です。

環境変数用のファイルをつくる

ルートディレクトリ（gatsby-config.jsがあるところ）にファイルを2つ作ります。開発環境用と本番環境用のファイルです。名前は以下のとおり。

• .env.development
• .env.production

.env.developmentは、gatsby developで使われます。
.env.productionは、gatsby buildまたはgatsby serveで使われます。

.gitignoreに追記

Git管理している場合は環境変数用のファイルは除いておいた方がよいです。環境に依存するやつなので。

Gatsby Starter Blog の.gitignoreファイルにはデフォルトで以下が記述済みでした。

.gitignore

# dotenv environment variable files
.env*

環境変数を指定

それぞれのファイルで変数を指定します。

.env.development

TEST_MSG = "これはDEVELOPMENTです"

.env.production

TEST_MSG = "これはPRODUCTIONです"

※環境変数を編集した場合、devサーバは再起動しないと読み込まれないので注意が必要です。

コンポーネントで読み込む

適当なコンポーネントで以下を記述してみる。

console.log(process.env.TEST_MSG)

gatsby developしてブラウザのデバッグツールでconsoleを見ると「これはDEVELOPMENTです」と表示されており.env.developmentが読み込まれていることがわかります。

gatsby buildして本番環境にアップロードすると「これはPRODUCTIONです」が表示されます。

gatsby-config.jsで読み込む

gatsby-config.js内で環境変数を使う場合はファイルの先頭に次の記述をしておけば、あとは同じ。

gatsby-config.js

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

参考サイト

Environment Variables | Gatsby