【Next.js】Next.js × microCMSでブログっぽいものを作る

タイトルの通りですが、Next.jsとmicroCMSでブログっぽいものを作る方法です。

細かいところかなり省略していますが、何かの参考にしていただけたら幸いです。

参考サイト
microCMS公式
 microcms-js-sdk

事前準備

パッケージのインストール

microCMSで作成したコンテンツを取得するためにmicrocms-js-sdkをインストールします。

npm i microcms-js-sdk
or
yarn add microcms-js-sdk

APIスキーマの準備

microCMSの管理画面から API設定 > APIスキーマと進み、フィールドを準備します。

コンテンツの作成

下記のように、microcms-js-sdkで取得するコンテンツを作成します。

実装

ソースコードはこんな感じです。

ディレクトリ構成

pages/article.tsx
pages/article/[id].tsx

article.tsx

ブログの記事一覧画面(のつもり)です。

client.getでコンテンツの一覧を取得しています。

queriesのfieldsで取得するフィールドを指定しています。

titleは自分が作成したフィールドで、idとpublishedAtはコンテンツ作成時に自動で付与されます。

コンテンツに自動付与される値

import useSWR from 'swr';
import { createClient } from 'microcms-js-sdk'; 
import Link from 'next/link';

const Article = () => {
  type Article = {
    id: string;
    title: string;
  }

  const client = createClient({
    serviceDomain: "YOUR_DOMAIN",
    apiKey: "YOUR_API_KEY",
  });

  const fetcher = async (endpoint: string): Promise<Article[]> => {
    const article = await client
      .get({
        endpoint,
        queries: { fields: 'id,title,publishedAt' },
      });
    return article.contents;
  }

  const { data, error } = useSWR('article', fetcher)
  
  return (
    <ul>
      {data && data?.map((article, index) => (
        <li key={index}>
          <Link href={`/article/${article.id}`}>
            <a>{article.title}</a>
          </Link>
        </li>  
      ))}
    </ul>
  );
}

export default Article;

[id].tsx

ブログの記事詳細画面(のつもり)です。

client.getListDetailでcontentIdを指定することで指定されたコンテンツidのコンテンツのみ取得しています。

import { useRouter } from 'next/router'
import useSWR from 'swr';
import { createClient } from 'microcms-js-sdk'; 

const ArticleDetail = () => {
  type Article = {
    title: string;
    body: string;
  }

  const router = useRouter();

  const client = createClient({
    serviceDomain: "YOUR_DOMAIN",
    apiKey: "YOUR_API_KEY",
  });

  const fetcher = async (endpoint: string): Promise<Article> => {
    const article = await client
      .getListDetail({
        endpoint,
        contentId: router.query.id as string
      });
    return article;
  }

  const { data, error } = useSWR(router.query.id && 'article', fetcher)

  return (
    <>
      {data && (
        <div>
          <h1>{data?.title}</h1>
          <p>{data?.body}</p>
        </div>
      )}
    </>
  )
}

export default ArticleDetail;

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村