【Nextjs】microCMSからデータを取得する方法

はじめに

NextjsとmicroCMSでブログサイトを開発していたところ、microCMSからデータ取得するのに時間がかかったので共有します。

問題

SSRでどうやってデータを取得すればいいのかわかりませんでした。
データ取得にはmicroCMSが公式で出しているSDKを使いました。

まず以下のようにして、クライアントを作成

client.ts

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

export const client = createClient({
  serviceDomain: process.env.MICROCMS_URL,
  apiKey: process.env.MICROCMS_API_KEY,
});

そして以下のようにデータ取得を試みる

"use client"
/* 省略 */
const [ blogs, setBlogs ] = useState<Blogs[]>([]);

useEffect(() => {
    const fetchBlog = async () => {
        const { contents } = await client.get({ endpoint: "blogs" });
        setBlogs(contents) // blogsのstateがある。
    }
}, [])

/* 省略 */

ところが、以下のようなエラーが出てしまう。

Unhandled Runtime Error
Error: parameter is required (check serviceDomain and apiKey)

Source
app/lib/microcmsClient.ts (3:17) @ <unknown>

  1 | import { createClient } from "microcms-js-sdk";
  2 |
> 3 | export const client = createClient({
    |               ^
  4 | serviceDomain: "my-tech-blog-jisou",
  5 | apiKey: process.env.MICROCMS_API_KEY,
  6 | });

解決策

SSRでデータ取得を実装する。

const { contents } = await client.get<{ contents: Blog[] }>({
    endpoint: "blogs",
+    customRequestInit: {
+      cache: "no-store",
+    },
});

原因

データ取得を実装したコンポーネントでCSRを採用していたので、クライアントを作成するときの環境変数をうまく参照できていませんでした。

環境変数を定義する際にNEXT_PUBLICというprefixをつければブラウザでも環境変数を参照することが出来るようになりますが、APIキーなどの秘匿したい情報がブラウザから参照できてはセキュリティ的な問題があるので、今回の解決策を採用しました。

終わりに

Nextjsの仕様をまだいまいち理解していないので、今回躓いてしまったのかなと思います。どんどん使ってみます！

✨About Me✨

• 高専1年生です、今年から2年生。高専の方いたらぜひ仲良くしてください！
• X(Twitter)