.envファイル、.env.development.localファイルを設定

これで、外部に API_KEYなどを見せないように設定。

.env.development.local

BASE_URL=http://localhost:3000
API_KEY=hogehogehogee-himitsudayooon
API_URL=https://hogehoge.microcms.io/api/v1

BASE_URLは、いつもこの値。
API_KEYとAPI_URLは、microCMS管理画面で確認しておいた値。

注意！

.gitignore に .env.development.local が記載されてることを確認。
なければ、追記しておく。
.gitignoreとは、githubにプッシュしないファイルを設定するところ。
プッシュされちゃうと、人目にさらす危険が発生するから。

.gitignore 内。

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

こうなってれば、いいね。

追記！！

.env.development.localだけではダメでした。
実際運用する際は .env.local も作っておきましょう。
内容は、.env.development.local の内容をそのままコピーでオッケー。

あと、Vercel側で、microCMSのAPI_KEYを指定しておかないと、
デプロイの際に「mapで分配するデータが未定義だよ」エラーが出てしまいます！
ご注意ください。
「TypeError: Cannot read property 'map' of undefined」

Vercelにて、API_KEYを設定します。

またまた、追記！！

もう少し基本的なことを。
.env は特になにかインストールする必要もなく、
.env.local ファイル（本番用）と、.env.development.local ファイル（開発用）を作って、

WORDPRESS_GRAPHQL_ENDPOINT=http://hoge/blog/graphql

などと記入してやるだけでいい。それは上でも書いてますね。

利用する際は、

process.env.WORDPRESS_GRAPHQL_ENDPOINT

と、指定してあげればいい。