4つの言葉が一度に出てきて混乱した

Next.jsとmicroCMSを使ったブログ制作を始めると、 次のような言葉が何度も登場します。

一つずつ説明を読むと、 何となく役割は分かります。

ところが、実際のコードではすべてが一緒に登場します。

import ArticleList
  from "@/components/ArticleList";

import { getArticles }
  from "@/libs/microcms";

export default async function BlogPage() {
  const data = await getArticles();

  return (
    <main>
      <ArticleList
        articles={data.contents}
      />
    </main>
  );
}

これらは別々に動いているのではなく、 それぞれが違う役割を担当しながら 一つのWebページを作っています。

最初に全体像を見てみる

まずは細かいコードを読む前に、 記事が表示されるまでの全体像を見てみます。

この流れの中で、 APIは独立した画面やサービスではありません。

microCMSとNext.jsの間で、 記事データを受け渡すための窓口として働きます。

Reactは画面を部品から作る

Reactは、Webページの見た目を 小さな部品に分けて作るために使います。

この小さな画面部品を、 コンポーネントと呼びます。

例えば、記事カードは次のようなReactコンポーネントとして作れます。

type Props = {
  title: string;
  description: string;
};

export default function ArticleCard({
  title,
  description,
}: Props) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{description}</p>
    </article>
  );
}

Reactは、このコンポーネントへ渡されたデータを使い、 画面に表示する形を作ります。

Next.jsはWebサイト全体を動かす

Next.jsは、Reactを使って WebサイトやWebアプリを作るためのフレームワークです。

Reactだけでも画面は作れますが、 実際のWebサイトには画面以外の仕組みも必要です。

App Routerでは、 フォルダとpage.tsxを使ってページを作ります。

src
├── app
│   ├── page.tsx
│   └── blog
│       ├── page.tsx
│       └── [id]
│           └── page.tsx
├── components
│   ├── ArticleCard.tsx
│   └── ArticleList.tsx
└── libs
    └── microcms.ts

microCMSはコンテンツを管理する

microCMSは、 記事やお知らせなどの内容を管理するための ヘッドレスCMSです。

管理画面では、記事タイトルや本文、 画像、カテゴリなどを登録します。

一般的なWordPressテーマのように、 microCMS自身がWebページのデザインを表示するわけではありません。

microCMSはコンテンツを保存し、 外部から要求されたときにAPIでデータを返します。

APIはデータの受け渡し窓口

APIは、 異なるサービスやプログラム同士が 情報をやり取りするための窓口です。

今回の場合は、 Next.jsがmicroCMSへ記事データを要求し、 microCMSがJSON形式で記事を返します。

APIはデータそのものではなく、 データを要求したり受け取ったりするための仕組みです。

4つがつながる順番

ここまでの役割を、 一つの記事が表示される順番で整理します。

1. 1
   microCMSに記事を登録する

   タイトル、本文、画像などを管理画面へ入力します。

2. 2
   Next.jsがAPIを呼び出す

   microCMSへ記事データを要求します。

3. 3
   microCMSがJSONを返す

   記事タイトルや本文がデータとして返ります。

4. 4
   Next.jsがデータを受け取る

   APIのレスポンスをdataなどの変数へ入れます。

5. 5
   Reactコンポーネントへ渡す

   Propsを使って記事カードや一覧へ渡します。

6. 6
   ブラウザーへ画面を表示する

   Reactが見出しや文章の形に組み立てます。

コードでつながりを確認する

ここからは、実際のコードを3つに分けて確認します。

1．microCMSへ接続する処理

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

export type Article = {
  id: string;
  title: string;
  description: string;
};

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

export const getArticles = async () => {
  return client.getList<Article>({
    endpoint: "blogs",
  });
};

このファイルでは、 microCMSへ接続するためのクライアントと、 記事一覧を取得する関数を作っています。

2．Next.jsのページでデータを取得する

import ArticleList
  from "@/components/ArticleList";

import { getArticles }
  from "@/libs/microcms";

export default async function BlogPage() {
  const data = await getArticles();

  return (
    <main>
      <h1>ブログ記事一覧</h1>

      <ArticleList
        articles={data.contents}
      />
    </main>
  );
}

getArticles()を実行すると、 microCMSのAPIから記事一覧が返ります。

3．Reactコンポーネントで表示する

import type {
  Article,
} from "@/libs/microcms";

type Props = {
  articles: Article[];
};

export default function ArticleList({
  articles,
}: Props) {
  return (
    <div>
      {articles.map((article) => (
        <article key={article.id}>
          <h2>{article.title}</h2>
          <p>{article.description}</p>
        </article>
      ))}
    </div>
  );
}

APIから返るデータの中身

microCMSのリストAPIからは、 記事配列だけでなく、件数などの情報も返ります。

{
  "contents": [
    {
      "id": "article01",
      "title": "Reactの基本",
      "description":
        "コンポーネントについて解説します"
    },
    {
      "id": "article02",
      "title": "Next.jsの基本",
      "description":
        "ルーティングについて解説します"
    }
  ],
  "totalCount": 2,
  "offset": 0,
  "limit": 10
}

このレスポンス全体が、 先ほどのコードではdataへ入っています。

そのため、記事一覧をReactコンポーネントへ渡すときは、 data.contentsを使用しています。

取得したデータをPropsで渡す

Next.jsのページで取得した記事データは、 Propsを使ってReactコンポーネントへ渡せます。

子コンポーネントでは、 関数の引数としてarticlesを受け取ります。

export default function ArticleList({
  articles,
}: Props) {
  return (
    <div>
      {articles.map((article) => (
        <p key={article.id}>
          {article.title}
        </p>
      ))}
    </div>
  );
}

ブラウザーへ表示されるまで

ユーザーがブログ一覧ページへアクセスすると、 内部では次のような流れが進みます。

microCMSの記事を更新するとどうなる？

microCMSの管理画面で記事タイトルを変更すると、 保存されているコンテンツデータが更新されます。

次にNext.jsがAPIからデータを取得したときは、 更新後の記事タイトルが返ります。

ただし、実際にいつサイトへ反映されるかは、 Next.js側のキャッシュや再検証の設定によって変わります。

APIキーはどこに書く？

microCMSのAPIへ接続するには、 サービスドメインやAPIキーを使用します。

これらはコードへ直接書かず、 環境変数として管理します。

MICROCMS_SERVICE_DOMAIN=your-service
MICROCMS_API_KEY=your-api-key

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

また、秘密にする必要があるAPIキーには、 ブラウザーへ公開される環境変数用の接頭辞を付けません。

よくあるつまずき

<ArticleList
  articles={data.contents}
/>

const data = await getArticles();

どこで問題が起きているか調べる方法

記事が表示されないときは、 処理を小さく分けて確認します。

const data = await getArticles();

console.log(data);
console.log(data.contents);
console.log(data.totalCount);

最初から「すべてが壊れている」と考えず、 どの段階までは正常かを確認することが大切です。