🍏

Next.js13 × microCMSの連携

2023/10/19に公開

Next.js

そろそろ嫌で手をつけていなかったNext13のAppRouterのキャッチアップをしないといけないなぁと思い、

すでに作成済みのコチラのギャラリーをNext13のappディレクトリ軸の開発でもう一度作ってみました。

https://gohshi54.com/photos

またmicroCMS×Next13の情報もまだ少ない感じがしたので、

それらも踏まえてアウトプットできたらと思います。

今回は下記の記事とNext.jsのドキュメントを参考にしつつ、

Next13ではgetStaticProps等の書き方が変わった部分もあるのでそれを踏まえて開発をしてみました。

それでは早速。

まずはmicroCMSのデータ取得の記述を行います。

libs/client.ts

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

if (!process.env.API_KEY) {
    throw new Error('API_KEY が設定されていません。');
};

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

//写真一覧を取得する
export const fetchPictures = async () => {
    const res = await fetch('https://xxxxxxxxxxx.microcms.io/api/v1/picture?limit=100', {
        cache: "no-cache",
        headers: {
            'X-API-KEY': process.env.API_KEY || '',
        },
    });

    if (!res.ok) {
        throw new Error('エラーが発生しました。');
    }
    const pictures = await res.json();
    return pictures;
}

Next13(AppRouter)の場合はgetStaticPropsやgetSeverSidePropsなどの記述は行わずこんな感じの記述でページの生成を分ける感じのようです。

fetchサンプルコード

// 従来の`getStaticProps`
// `force-cache`はデフォルトであり、省略可能。
fetch(URL, { cache: 'force-cache' });

// 従来の`getServerSideProps`
fetch(URL, { cache: 'no-store' });

// `getStaticProps`の`revalidate`オプション(ISR)
fetch(URL, { next: { revalidate: 10 } });

参照はコードはコチラ↓

https://nextjs.org/blog/next-13

あとはpage.tsxで呼び出してmap関数で展開してくだけです。

app/page.tsx

import React from 'react';
import { fetchPictures } from '../libs/microCms';
import { PictureType } from '../types/types';

export default async function Page() {
  const data = await fetchPictures();
  const pictures: PictureType[] = data.contents;

  return (
    <div>
      {/* ここに写真を表示するためのコードを追加できます。 */}
    </div>
  );
}

fetchの記述自体は従来に比べてめちゃくちゃ楽になったなぁと感じます。

ただ全体的に従来のpagesディレクトリでの開発に比べて

Client ComponentsとServer Compontensをしっかり分けていかないといけないので、しっかり理解していないと予期せぬエラー沼にハマる感じはあります。

なので基本的にClient Componentsはコンポーネントファイルで管理する感じらしいです。(コンポーネントツリーの端の部分に配置)

これらに慣れて書けるようになってくればよりコードの可読性の向上、開発効率の向上等に繋がってくるのでは無いかなと感じます。

とりあえず簡単ではありますが、今回はNext13 AppRouterの開発についてまとめてみました。

何かご指摘等ありましたらご遠慮なくコメントしてください。

また少しでも参考になれば幸いです。

今回のギャラリーのリポジトリです。

Discussion