はじめに

Next.js 14 の App Router では、キャッシュを利用して高速なページレンダリングが可能ですが、バックエンド（例えば Django DRF）でデータが更新された場合、キャッシュを手動でリバリデート（再検証） する必要があります。

本記事では、Next.js 14 の app/api/revalidate/route.js を利用して、Django DRF からのシグナル（例: post_save など）を受け取り、キャッシュをリバリデートする方法について詳しく解説します。

1. Next.js のキャッシュとリバリデーション

Next.js の App Router では、自動キャッシュ管理 が導入されており、デフォルトでページや API のレスポンスをキャッシュします。データが更新された際に、最新情報を反映するためには、手動でキャッシュをリバリデートする必要があります。

リバリデーションには、以下の方法があります。

• revalidateTag(tag) → 指定したタグに関連するキャッシュをリバリデート
• revalidatePath(path) → 指定したパスのキャッシュをリバリデート
• API 経由でキャッシュを更新する

2. app/api/revalidate/route.js の作成

Next.js の App Router では、API ルートを app/api/revalidate/route.js に定義し、バックエンドからのリクエストを受け取ってキャッシュをリバリデートできます。

JAVASCRIPT
// app/api/revalidate/route.js
import { revalidateTag, revalidatePath } from "next/cache";
import { NextResponse } from "next/server";

export async function POST(req) {
  try {
    const { tag, path, secret } = await req.json();

    if (secret !== process.env.REVALIDATE_SECRET) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
    }

    if (tag) {
      revalidateTag(tag);
    }
    if (path) {
      revalidatePath(path);
    }

    return NextResponse.json({ success: true });
  } catch (error) {
    return NextResponse.json(
      { error: "Internal Server Error" },
      { status: 500 }
    );
  }
}

✅ ポイント

• POST メソッドで Django などのバックエンドからのリクエストを受け取る。
• revalidateTag(tag) を使用すると、特定のタグに関連するキャッシュをリバリデート可能。
• revalidatePath(path) を使用すると、特定のページのキャッシュをリバリデート可能。
• セキュリティのため、環境変数 REVALIDATE_SECRET で認証を行う。

3. Django からのリクエスト送信

Django 側でデータが更新された際に、Next.js の API にリクエストを送信します。Django の signals.py で post_save シグナルを利用して、Next.js の API を呼び出します。

Django の signals.py にフックを設定

PYTHON
import requests
from django.db.models.signals import post_save
from django.dispatch import receiver
from myapp.models import Article

NEXTJS_REVALIDATE_URL = "https://your-next-app.com/api/revalidate"
NEXTJS_REVALIDATE_SECRET = "your_secret_key"

@receiver(post_save, sender=Article)
def clear_nextjs_cache(sender, instance, **kwargs):
    data = {
        "path": f"/articles/{instance.slug}",
        "tag": "articles",
        "secret": NEXTJS_REVALIDATE_SECRET
    }
    requests.post(NEXTJS_REVALIDATE_URL, json=data)

✅ ポイント

• Django の post_save シグナルを利用し、記事の更新時に Next.js にリクエストを送信。
• path に更新された記事の URL を指定し、そのページのキャッシュをリバリデート。
• tag に articles を指定し、関連するデータのキャッシュもリバリデート。
• NEXTJS_REVALIDATE_SECRET を使用して、Next.js の API の認証を確保。

4. 確認方法

リバリデーションが正常に動作するか確認するには、以下の手順を実行します。

1. Django 管理画面や API で記事を更新する。
2. Next.js の API /api/revalidate にリクエストが送信される。
3. ブラウザで /articles/{slug} にアクセスし、最新のデータが反映されているか確認。
4. Next.js の開発ツールでキャッシュのリバリデートが発生しているか確認。

5. まとめ

Next.js 14 App Router では、next/cache の revalidateTag や revalidatePath を活用することで、
Django DRF などのバックエンドからのデータ更新を反映することが可能です。

✅ 学んだこと

• app/api/revalidate/route.js を作成し、バックエンドからのリクエストを受け取る。
• revalidateTag(tag) で特定のタグに関連するキャッシュをリバリデート。
• revalidatePath(path) で特定のページのキャッシュをリバリデート。
• Django の signals.py を利用し、post_save で Next.js の API にリクエストを送信。

Next.js のキャッシュ管理を適切に活用し、パフォーマンスとリアルタイムデータの両方を最大化しましょう。