Zenn
😽

Next.js と Strapi を連携して CMS を構築する

に公開
Next.js
SSG
CMS
Strapi
Headless CMS
tech

Next.js と Strapi を連携して CMS を構築する

はじめに

以前、Next.jsのSSG（静的サイト生成）についての記事を書きました。そこでは、Next.jsのApp Routerを活用したSSGの実装方法を紹介しました。本記事では、それをさらに発展させて、Strapiを組み合わせたヘッドレスCMSを活用し、柔軟なコンテンツ管理システムを構築する方法を解説します。Next.jsのSSGの基礎を理解した上で、実際にStrapiと連携してブログ記事を動的に管理する仕組みを作っていきます。

環境構築

1. Strapi のセットアップ

まず、コンテンツ管理を担当するStrapiをローカルでセットアップします。以下のコマンドで Strapi プロジェクトを作成します。

npx create-strapi-app@latest my-strapi --quickstart

このコマンドを実行すると、Strapi の管理画面にアクセスできるようになります。

cd my-strapi
npm run develop

ブラウザで http://localhost:1337/admin にアクセスし、管理者アカウントを作成しましょう。

2. API の作成

Strapi の管理画面から「Content-Type Builder」に移動し、新しい Content Type を作成します。例えば、「Article」という名前で以下のフィールドを追加します。

  • title (Text)
  • content (Rich Text)
  • slug (UID)

作成後、「Permissions」設定で「Public」に find と findOne の権限を付与し、API 経由でデータを取得できるようにします。

Next.js との連携

1. Next.js プロジェクトの作成

前回の記事でNext.jsの基本的なセットアップ方法を紹介しましたが、今回はStrapiとの連携を意識した形でプロジェクトを作成します。

npx create-next-app@latest my-next-app --ts --experimental-app
cd my-next-app

前回同様にTypeScriptを有効にし、App Routerを活用する構成になっています。

2. Strapi からデータを取得

Next.jsのSSGを活用して、Strapiから取得した記事データを静的に生成します。前回の記事ではgenerateStaticParamsを利用しましたが、今回はAPIから直接データを取得する構成です。

// app/page.tsx
import Link from 'next/link';

async function getArticles() {
  const res = await fetch('http://localhost:1337/api/articles');
  const data = await res.json();
  return data.data;
}

export default async function Home() {
  const articles = await getArticles();
  return (
    <div>
      <h1>記事一覧</h1>
      <ul>
        {articles.map(article => (
          <li key={article.id}>
            <Link href={`/articles/${article.attributes.slug}`}>{article.attributes.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

3. 記事詳細ページの作成

記事の詳細ページも、前回の記事で紹介した動的ルーティングを活用して構築できます。

// app/articles/[slug]/page.tsx
async function getArticle(slug: string) {
  const res = await fetch(`http://localhost:1337/api/articles?filters[slug][$eq]=${slug}`);
  const data = await res.json();
  return data.data[0];
}

export default async function ArticlePage({ params }: { params: { slug: string } }) {
  const article = await getArticle(params.slug);
  return (
    <div>
      <h1>{article.attributes.title}</h1>
      <p>{article.attributes.content}</p>
    </div>
  );
}

まとめ

以上の手順で、Next.jsとStrapiを連携させて、SSGによる高速なブログサイトを構築できました。前回の記事で学んだSSGの仕組みを活かしつつ、Strapiを導入することで、コンテンツの管理が柔軟になりました。今後は、Strapiのカスタムフィールドや、より高度なAPI連携も活用して、さらに拡張性のあるサイトを構築していくことができます。

Discussion