Next.js で microCMS からデータ取得した時のメモ

現在 Next.js 15 で制作している自分のサイトで、制作実績の部分は microCMS で管理することにしたので、microCMS の API でデータを取得して表示しようとした所、色々ハマってしまった。

コンポーネントの構成は、デザインや動きの部分に訳あって以下のよう。

page.tsx
↓
<HomeContent>（クライアントコンポーネント）
↓
<worksCard>（クライアントコンポーネント）

useEffect 内で取得を試す

まず、始めに以下の microCMS の記事を参考にして、client.js を作成して <WorksCard> コンポーネント内で取得しようと試してみた。

client.js 部分を参考にした記事
https://blog.microcms.io/microcms-next-jamstack-blog/

microCMS の API_KEY は .env.local で管理し、<WorksCard> コンポーネントの useEffect 内で client.js の client.get() で取得したが、.env.local の API_KEY を NEXT_PUBLIC_ を付けないと取得できなかった。API_KEY は公開したく無いので、NEXT_PUBLIC_ 無しで別の方法を調べた。
クライアントコンポーネントでは NEXT_PUBLIC_無しは参照できないようだ。

API Router を試す

次に AI (claude) に聞いたら API Router というのを使うことを提案された。
api/works/route.ts ファイルを作成して、それに client.js を import し client.get() で microCMS のデータを取得。.env.local の API_KEY は NEXT_PUBLIC_ 無しで設定。
さらに <WorksCard> コンポーネントから、api/works/ にフェッチしてデータを取得する。
route.ts はサーバーコンポーネントになるということかな？

これでとりあえずは microCMS からデータを取得はできた。
が、取得できたのは next dev の時だけだった。
output: ‘export’ 設定で next build コマンドを使い out ディレクトリに静的ページ（SSG）として書き出しを試みたらエラーが出てしまった。
最終仕様が SSR であれば問題なさそうだが、SSG にしたかったので別の方法を調べた。

サーバーコンポーネントで取得し props で渡していくのを試す

page.tsx（サーバーコンポーネント） で client.js からデータを取得して、
↓
<HomeContent worksData={worksData}>
↓
<worksCard worksData={worksData}>

のようにしていけば SSG にも対応できた。
ただ、このやり方はあまりコンポーネントの階層が深くなったらやりたくない方法だよね。

あと、client.js は新めの microCMS の記事を参考にして microcms.ts に変更した。
https://blog.microcms.io/microcms-next15-jamstack-blog/

今回ハマった理由は、NEXT_PUBLIC_ 接頭辞の有無や、API Router、サーバーコンポーネント、クライアントコンポーネントのことよく理解していなかったことが問題だったと思う。
また、Next.js 15 から勉強しだしたので、過去のバージョンの記事を気づかずに参照してしまっていることもあるので、それも問題。

最終的に Cloud flare Workers でデプロイするまでに、まだまだ沢山ハマりそうだが何とかそこまで辿り着きたい。