kt-tech.blog

読み込み中...

最新記事

カテゴリー

トラブルシューティング設定・環境構築実装設計学習メモ技術勉強会日常

アーカイブ

2023年12月21日

Next.js App Router microCMS

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

Share

はじめに

今回は、【 Next.js×MicroCMS】初心者向け爆速ブログ作成ハンズオンというテーマで記事をシェアします。

初心者向けなので、緬く解説しながら進めていこうと思っています。

1. 対象者

Next.jsとmicroCMSを用いて無料でブログを作ってみたい方々
WordPress や STUDIO などの今時の便利ツールを使いたくない方々
無料でブログやPF掲載用のサイトを作成したい方々
わからないことは自分で調べられる人方々

2. 動作環境

端末

PC : MacBook Air(M1,2020)
RAM : 8GB
OS : macOS Monterey(ver12.1)

実行環境

Node.js: ver.18以降

3. 技術選定

フロントエンド

Language: TypeScript5.0
Library: React18
FW: Next.js13.5(App routerを採用)

CMS

CMS: microCMS

CSS

TailwindCSS

デプロイ

Service: Vercel

4. 実装手順

プロジェクト作成

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

microCMSの設定

https://microcms.io にアクセスしてコンテンツ管理画面を作成します。

API_KEYの設定

SERVICE_DOMAIN=xxxxxxxxxxxx
API_KEY=xxxxxxxxxxxx

microcms-js-sdkの準備

~ my-tech-blog $ 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({
    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}` }} />
    </>
  )
}

レイアウトを整える

CSSを追加してダークモードにも対応します。

デプロイ

VercelとGitHubリポジトリを連携してデプロイします。

Create Next App

https://my-tech-blog-henna.vercel.app/blogs

5. 参考文献

microCMS + Next.jsでJamstackブログを作ってみよう

https://blog.microcms.io/microcms-next-jamstack-blog/

6. おわりに

今回はブログを作成していくところまでを担当しました。

ベースはできたと思うのでここからどうアレンジしていくかは皆様にお任せいたします！

自分が作成しているブログ（開発中）も見てくださると嬉しいです。

https://kt-tech.blog/

関連記事

すべて見る

【設定・環境構築】OpenNext でNext.js SSGサイトをCloudflare Workersにデプロイする完全ガイド

設定・環境構築

【設定・環境構築】OpenNext でNext.js SSGサイトをCloudflare Workersにデプロイする完全ガイド

2026年3月19日

【実装】Notion calloutブロックをNext.jsでカラフルなUIコンポーネントとして表示する

【実装】Notion calloutブロックをNext.jsでカラフルなUIコンポーネントとして表示する

2026年3月19日

【トラブルシューティング】Cloudflare Pages → Workers 移行で遭遇したEdge Runtime問題集

トラブルシューティング

【トラブルシューティング】Cloudflare Pages → Workers 移行で遭遇したEdge Runtime問題集

2026年3月19日