【Next.js×microCMS】初心者向け爆速ブログ作成ハンズオン

npx create-next-app my-tech-blog --typescript

SERVICE_DOMAIN=xxxxxxxxxxxx
API_KEY=xxxxxxxxxxxx

npm install --save microcms-js-sdk

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

export type Blog = {
    id: string;
    title: string;
    body: string;   
}

export const client = createClient({
    // 環境変数は string | undefined なので、ないときは早めに落とす
    serviceDomain: process.env.SERVICE_DOMAIN!,
    apiKey: process.env.API_KEY!,
});

export const getBlogs = async () => {
    const blogs = await client.getList<Blog>({ endpoint: "blogs" });
    return blogs;
}

export const getDetail = async (contentId: string) => {
    const blog = await client.getListDetail<Blog>({
        endpoint: "blogs",
        contentId,
    });
    return blog;
};

import Link from "next/link";
import { getBlogs } from "@/../libs/client";

export default async function StaticPage() {
    const { contents } = await getBlogs();
    if (!contents) {
      return <h1>No Contents</h1>;
    }
    return (
      <div>
        <ul>
          {contents.map((blog) => (
            <li key={blog.id}>
              <Link href={`/blog/${blog.id}`}>{blog.title}</Link>
            </li>
          ))}
        </ul>
      </div>
    );
}

import { getDetail, getBlogs } from "@/../libs/client";

export async function generateStaticParams(){
  const { contents } = await getBlogs();
  const paths = contents.map((blog) => ({ blogId: blog.id }));
  return [...paths];
}

export default async function StaticDetailPage({
  params : { blogId },
}: {
  params: { blogId : string};
}) {
  const blog = await getDetail(blogId);
  return (
    <>
      <p>{blog.title}</p>
      <div dangerouslySetInnerHTML={{ __html: `${blog.body}` }} />
    </>
  )
}