こんにちは。
下記のサイトを参考にNext.jsを使ったヘッドレスのブログサイトを作りたい！と試行錯誤していて、Twitterで独り言ダダ漏れになってる佐藤です。（常に一人寂しくリモートワークしてるので、ぜひフォローしてください）

参考にした記事はこちら

https://blog.microcms.io/microcms-next-jamstack-blog/

microCMS + Next.jsでJamstackブログを作ってみよう -microCMS

APIキーが正しくないと怒られる

前回、microCMSをNextから呼び出そうとしてエラーになってしまいました。

https://blog.microcms.io/microcms-next-jamstack-blog/#h9a03b77447

3. APIキーをenvファイルで保護 -microCMS + Next.jsでJamstackブログを作ってみよう

公式ドキュメントでは３項目目にこんな記述があります。

そこで沸いたのが、下記の疑問です。

• そもそも.envファイルってなんなの？
• なんで.env.localをつけてるのに、ファイルでは名前を最後まで記載しなくていいの？
• .env.localだと安全ってなんで？

今回は表示するまで漕ぎ着けたので、解決できた部分をメモしていきます。
これから勉強を始める方の疑問解決に役立ちますように。

そもそも.envファイルってなんなの？

envというのは環境変数を指す「environment variable」のことです。
C言語でも環境変数を取得する時の変数名にenvを使うことがあります。

じゃあ環境変数ってなんなのかというと、下記のとおりです。

値というのは、マシン名、ユーザー名などの、PCの諸設定等です。

node.jsではprocess.envを使うと、.envファイルを参照できます。

公式では.env.development.localとすることで、ローカルで使えるとあります。

これはおそらく.gitignoreに下記の記述があるから。

# local env files
.env*.local

.gitignoreとは

.gitignoreっていうのは、リモートリポジトリにファイルを送信する際
「このファイルはリモートリポジトリに入れたらあかん」っていうのを書いておくものです。
要は、リモートリポジトリ用のブラックリスト。

つまりは、どれだけgit pushしても、ローカルだけに残るのが.env*.local ってことですね。
ちなみに*っていうのは「この文字は何って文字が何文字入ってもかまへんで」ってことです。

なんで「process.env.development.local」じゃないの？

そう思うのは自分がjs初学者ですね。
これは自分で実験してみて把握しました。

試しに記入してみました。

import { createClient } from 'microcms-js-sdk';

export const client = createClient({
	serviceDomain: 'MyDomein',
	apiKey: process.env.development.local.API_KEY
});

表示結果は下記（serviceDomainはあえて書き換えてます）

さっきと違って「そんなプロパティない！」と怒ってます。
.envだけで、.env*全てのファイルを指していると認識してくれるんですね。

そして読み込みはlocalとなってます。
.ファイル名.API_KEYで、ファイルの中の項目を選んでいるのがわかります。

試しにAPI _KEYを直接書き込んでみる

そもそもAPIキーというのはここに記述してあります。

これをさっきのjsに直接書いてみます。

import { createClient } from 'microcms-js-sdk';

export const client = createClient({
	serviceDomain: 'MyDomein',
	apiKey: '実際のAPIキー'
});

するとさっきのエラーが消えてこんな表示が

試しに、投稿を追加してリロードしてみます。

ヘッドレスCMSからデータの取得ができました。
やったね！！！！

ちなみに、この画面を見るためには先に公式ドキュメントの

• 4.microcms-js-sdkの準備
• 5. ブログの一覧を表示する
• 6. ブログの詳細を表示する

上記を参照して下記の作業をしておく必要があります。

• npm install –save microcms-js-sdkを実行
• index.jsをかきかえて、
• blogフォルダを作り、
• blogフォルダ内に[id].jsファイルを作る

おまけ

あまりにも進まなかったので、最近流行りのChatGPTに相談したりもしました。

当たらずとも遠からずですね。.env.MICRO_CMS_API_KEYって記述したら読み込めそうです。

関連記事

microCMSのAPIに手こずった話 lottieを使ってみる