Contentful Content Preview 機能チュートリアル実践 - Next.js での実装例

npx create-next-app@latest contentful-preview-demo
cd contentful-preview-demo
npm install contentful @contentful/rich-text-react-renderer @contentful/rich-text-types

CONTENTFUL_SPACE_ID=your_space_id
CONTENTFUL_PREVIEW_ACCESS_TOKEN=your_preview_api_token
CONTENTFUL_PREVIEW_SECRET=YOUR_PREVIEW_SECRET

import { createClient } from 'contentful'

/**
 * Contentful Preview API 専用クライアントの作成
 * 
 * Preview API を使用することで、下書き状態のコンテンツも取得可能
 * 通常の Delivery API では公開済みコンテンツのみ取得できる
 */
export const previewClient = createClient({
    space: process.env.CONTENTFUL_SPACE_ID,                    // Contentful スペース ID
    accessToken: process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN,  // Preview API 用のアクセストークン
    host: 'preview.contentful.com',                           // Preview API のエンドポイント
})

import { redirect } from 'next/navigation'

/**
 * Contentful からのプレビューリクエストを処理する API エンドポイント
 * 
 * Contentful の管理画面でプレビューボタンをクリックした際に呼び出される
 * 認証後、該当するブログ記事ページにリダイレクトする
 */
export async function GET(request) {
    // URL パラメータから secret と entry ID を取得
    const { searchParams } = new URL(request.url)
    const secret = searchParams.get('secret')  // 認証用のシークレットキー
    const id = searchParams.get('id')          // プレビュー対象のエントリ ID

    // 認証チェック: シークレットキーの検証とエントリ ID の存在確認
    if (secret !== process.env.CONTENTFUL_PREVIEW_SECRET || !id) {
        return new Response('Invalid token', { status: 401 })
    }

    // 認証成功時、該当するブログ記事ページにリダイレクト
    redirect(`/blog/${id}`)
}

import { previewClient } from '../../../lib/contentful'
import { documentToReactComponents } from '@contentful/rich-text-react-renderer'

/**
 * ブログ記事のプレビューページコンポーネント
 * 
 * Contentful の Preview API を使用して、下書きを含むすべてのエントリを表示
 * Rich Text フィールドを適切にレンダリングする
 */
export default async function BlogPost({ params }) {
    // Next.js 15 では params を await で取得する必要がある
    const resolvedParams = await params

    try {
        // Preview API を使用してエントリを取得
        // これにより下書き状態のコンテンツも取得可能
        const entry = await previewClient.getEntry(resolvedParams.id)

        return (
            <div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
                {/* プレビューモードであることを示すバナー */}
                <div style={{
                    background: '#f0f8ff',
                    padding: '1rem',
                    marginBottom: '2rem',
                    border: '1px solid #0066cc'
                }}>
                    🔍 Preview Mode - Entry ID: {resolvedParams.id}
                </div>

                {/* 記事タイトルの表示 */}
                <h1>{entry.fields.title || 'No Title'}</h1>

                {/* Rich Text 本文の表示 */}
                {entry.fields.body && (
                    <div>
                        {/* 
                         * documentToReactComponents を使用して Rich Text をレンダリング
                         * Contentful の Rich Text 形式を React コンポーネントに変換
                         */}
                        {documentToReactComponents(entry.fields.body)}
                    </div>
                )}

                {/* 本文が存在しない場合のフォールバック表示 */}
                {!entry.fields.body && (
                    <p style={{ color: '#666', fontStyle: 'italic' }}>
                        本文が設定されていません
                    </p>
                )}
            </div>
        )
    } catch (error) {
        // エラーハンドリング: エントリが見つからない場合やAPI エラーの処理
        return (
            <div style={{ padding: '2rem' }}>
                <h1>記事が見つかりません</h1>
                <p>Entry ID: {resolvedParams.id}</p>
                <p>Error: {error.message}</p>
            </div>
        )
    }
}

npm run dev