Next.jsとPrismicで始める！ヘッドレスCMS連携で爆速Webサイト構築【初心者向け】

「Next.jsでWebサイトを作りたいけど、コンテンツ管理が大変…」 そんな悩みを抱えていませんか？この記事では、Next.jsとPrismicというヘッドレスCMS（コンテンツ管理システム）を連携させて、爆速でWebサイトを構築する方法を、初心者向けにわかりやすく解説します。Prismicを使うことで、コンテンツの管理が劇的に楽になり、Next.jsのパフォーマンスを最大限に活かしたWebサイトを簡単に作れるようになります。さあ、一緒にPrismicとNext.jsの世界へ飛び込みましょう！

1. はじめに：なぜNext.jsとPrismicを組み合わせるのか？

Next.jsは、ReactをベースにしたJavaScriptフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）といった機能により、高速なWebサイトを構築できます。一方、Prismicは、ヘッドレスCMSと呼ばれるタイプのCMSで、コンテンツの管理に特化しています。

なぜこの2つを組み合わせるのでしょうか？

高速なWebサイト: Next.jsのパフォーマンスとPrismicの柔軟性を両立できます。
コンテンツ管理の効率化: Prismicでコンテンツを一元管理し、Next.jsで表示を自由にカスタマイズできます。
開発効率の向上: コンテンツとデザインを分離することで、開発チームの連携がスムーズになります。

2. Prismicの基本：ヘッドレスCMSとは？

従来のCMS（例：WordPress）は、コンテンツの管理と表示の両方を担っていました。一方、ヘッドレスCMSは、コンテンツの管理のみに特化し、APIを通じてコンテンツを提供します。

ヘッドレスCMSのメリット

柔軟性: コンテンツを様々なプラットフォーム（Webサイト、モバイルアプリ、IoTデバイスなど）で再利用できます。
パフォーマンス: フロントエンド（表示部分）を自由に選択できるため、高速なWebサイトを構築できます。
セキュリティ: コンテンツ管理システムと表示部分が分離されているため、セキュリティリスクを軽減できます。

3. Prismicアカウントの作成と設定

まずはPrismicのアカウントを作成しましょう。

Prismicの公式サイトにアクセスし、アカウントを作成します。
アカウント作成後、リポジトリ（コンテンツを保存する場所）を作成します。リポジトリ名は、プロジェクト名など、わかりやすい名前をつけましょう。
リポジトリ作成後、コンテンツモデル（コンテンツの構造を定義するもの）を作成します。例えば、ブログ記事であれば、タイトル、本文、画像などのフィールドを定義します。

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

次に、Next.jsのプロジェクトを作成します。

npx create-next-app@latest my-prismic-blog
cd my-prismic-blog

このコマンドを実行すると、my-prismic-blogという名前のNext.jsプロジェクトが作成されます。

5. Prismic SDKのインストール

PrismicのコンテンツをNext.jsで利用するために、Prismic SDK（ソフトウェア開発キット）をインストールします。

npm install @prismicio/client @prismicio/react @prismicio/next

@prismicio/client: Prismic APIと通信するためのクライアントライブラリ
@prismicio/react: ReactコンポーネントでPrismicのコンテンツを扱うためのライブラリ
@prismicio/next: Next.jsとの連携を容易にするためのライブラリ

6. Prismicの設定

Prismicの設定ファイルを作成します。prismic.config.jsというファイルを作成し、以下の内容を記述します。

// prismic.config.js
import * as prismic from '@prismicio/client';

export const repositoryName = process.env.PRISMIC_REPOSITORY_NAME || 'your-repository-name'; // リポジトリ名を指定

// Prismicクライアントの初期化
export const client = prismic.createClient(repositoryName, {
  accessToken: process.env.PRISMIC_ACCESS_TOKEN, // アクセストークンを指定 (オプション)
  routes: [
    {
      type: 'page',
      path: '/:uid',
    },
  ],
});

.env.localファイルを作成し、リポジトリ名とアクセストークンを設定します。

PRISMIC_REPOSITORY_NAME=your-repository-name
PRISMIC_ACCESS_TOKEN=your-access-token

注意: your-repository-nameとyour-access-tokenは、Prismicのリポジトリ名とアクセストークンに置き換えてください。アクセストークンは、Prismicの管理画面で確認できます。

7. ページの作成とコンテンツの取得

pagesディレクトリに、Prismicからコンテンツを取得して表示するページを作成します。例えば、pages/[uid].jsというファイルを作成し、以下の内容を記述します。

// pages/[uid].js
import { client } from '../prismic.config';
import { PrismicRichText } from '@prismicio/react';
import { useRouter } from 'next/router';

export default function Page({ page }) {
  const router = useRouter();

  // ページが読み込み中の場合
  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  if (!page) {
    return <div>Page not found</div>;
  }

  return (
    <div>
      <h1>{page.data.title}</h1>
      <PrismicRichText field={page.data.body} />
    </div>
  );
}

export async function getStaticPaths() {
  const pages = await client.getAllByType('page'); // 'page'はコンテンツモデルのID

  const paths = pages.map((page) => ({
    params: { uid: page.uid },
  }));

  return {
    paths,
    fallback: true, // 新しいページが追加された場合に備えてtrueに設定
  };
}

export async function getStaticProps({ params }) {
  const page = await client.getByUID('page', params.uid); // 'page'はコンテンツモデルのID

  return {
    props: {
      page,
    },
    revalidate: 10, // 10秒ごとに再検証
  };
}

このコードでは、getStaticPaths関数でPrismicからすべてのページのUIDを取得し、getStaticProps関数でUIDに基づいてコンテンツを取得しています。PrismicRichTextコンポーネントは、Prismicのリッチテキストフィールドを表示するために使用されます。

8. 動作確認

Next.jsの開発サーバーを起動し、ブラウザでhttp://localhost:3000にアクセスします。

npm run dev

Prismicで作成したコンテンツが表示されれば成功です！

9. まとめ

この記事では、Next.jsとPrismicを連携させてWebサイトを構築する方法を解説しました。

Next.jsとPrismicを組み合わせることで、高速で柔軟なWebサイトを構築できます。
PrismicはヘッドレスCMSであり、コンテンツの管理に特化しています。
Prismic SDKを使うことで、Next.jsでPrismicのコンテンツを簡単に利用できます。

次のステップ

Prismicのコンテンツモデルをさらに複雑にして、より高度なWebサイトを構築してみましょう。
Next.jsのAPI Routesを使って、Prismicのコンテンツを動的に取得してみましょう。
Vercelなどのプラットフォームにデプロイして、Webサイトを公開してみましょう。

関連リソース

この記事が、あなたのWebサイト構築の助けになれば幸いです！