Xây Dựng Nextjs Wagtail Headless Blog Hiệu Năng Cao A-Z

INSTALLED_APPS = [
    # ...
    'wagtail.api.v2',
    'rest_framework',
]

# Cấu hình Wagtail API Router
from wagtail.api.v2.views import PagesAPIViewSet
from wagtail.api.v2.router import WagtailAPIRouter

api_router = WagtailAPIRouter('wagtailapi')
api_router.register_endpoint('pages', PagesAPIViewSet)

from django.urls import path, include
from .api import api_router

urlpatterns = [
    path('api/v2/', api_router.urls),
    # ...
]

import requests
import logging
from django.db.models.signals import post_save
from django.dispatch import receiver
from wagtail.signals import page_published
from .models import BlogPage

logger = logging.getLogger(__name__)

@receiver(page_published, sender=BlogPage)
def trigger_nextjs_revalidation(sender, instance, **kwargs):
    """
    Tự động gửi Webhook thông báo cho Next.js On-demand Revalidation
    khi bài viết được Publish hoặc cập nhật.
    """
    nextjs_webhook_url = "https://yourblog.com/api/revalidate"
    secret_token = "YOUR_SUPER_SECRET_REVALIDATE_TOKEN"

    payload = {
        "secret": secret_token,
        "slug": instance.slug,
        "page_type": "blog_page",
    }

    try:
        response = requests.post(nextjs_webhook_url, json=payload, timeout=5)
        if response.status_code == 200:
            logger.info(f"Revalidation triggered successfully for {instance.slug}")
        else:
            logger.warning(f"Revalidation failed with status {response.status_code}")
    except Exception as e:
        logger.error(f"Error sending revalidation webhook: {str(e)}")

export interface StreamBlock<T = any> {
  type: string;
  value: T;
  id: string;
}

export interface HeadingBlockValue {
  heading_text: string;
  size: "h2" | "h3" | "h4";
}

export interface ParagraphBlockValue {
  text: string;
}

export interface CodeBlockValue {
  language: string;
  code: string;
}

export interface ImageBlockValue {
  url: string;
  alt: string;
  width: number;
  height: number;
  caption?: string;
}

import React from "react";
import Image from "next/image";
import { StreamBlock } from "@/types/wagtail";

// 1. Sub-component cho Heading Block
const HeadingBlock = ({ value }: { value: any }) => {
  const Tag = value.size || "h2";
  return <Tag className="text-2xl font-bold my-4 text-slate-100">{value.heading_text}</Tag>;
};

// 2. Sub-component cho Paragraph Block
const ParagraphBlock = ({ value }: { value: any }) => (
  <div 
    className="my-3 text-slate-300 leading-relaxed prose prose-invert"
    dangerouslySetInnerHTML={{ __html: value.text || value }}
  />
);

// 3. Sub-component cho Code Block
const CodeBlock = ({ value }: { value: any }) => (
  <div className="my-4 rounded-lg bg-slate-900 p-4 font-mono text-sm border border-slate-800">
    <div className="mb-2 text-xs text-slate-500 uppercase">{value.language}</div>
    <pre className="overflow-x-auto text-emerald-400">
      <code>{value.code}</code>
    </pre>
  </div>
);

// 4. Sub-component cho Image Block tối ưu với next/image
const ImageBlock = ({ value }: { value: any }) => (
  <figure className="my-6 flex flex-col items-center">
    <Image
      src={value.url}
      alt={value.alt || "Wagtail Image"}
      width={value.width || 1200}
      height={value.height || 675}
      className="rounded-xl object-cover shadow-lg"
      priority={false}
    />
    {value.caption && (
      <figcaption className="mt-2 text-center text-sm italic text-slate-400">
        {value.caption}
      </figcaption>
    )}
  </figure>
);

// Bảng ánh xạ Block Type sang React Component
const componentsMap: Record<string, React.FC<{ value: any }>> = {
  heading: HeadingBlock,
  paragraph: ParagraphBlock,
  code: CodeBlock,
  image: ImageBlock,
};

export default function StreamFieldRenderer({ blocks }: { blocks: StreamBlock[] }) {
  if (!blocks || !Array.isArray(blocks)) return null;

  return (
    <div className="streamfield-content w-full">
      {blocks.map((block) => {
        const Component = componentsMap[block.type];
        if (!Component) {
          console.warn(`Missing React component for StreamField block type: ${block.type}`);
          return null;
        }
        return <Component key={block.id} value={block.value} />;
      })}
    </div>
  );
}

import { NextRequest, NextResponse } from "next/server";
import { revalidateTag, revalidatePath } from "next/cache";

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const { secret, slug, page_type } = body;

    // 1. Kiểm tra Secret Token bảo mật
    const EXPECTED_SECRET = process.env.REVALIDATE_SECRET_TOKEN;
    if (secret !== EXPECTED_SECRET) {
      return NextResponse.json({ message: "Invalid secret token" }, { status: 401 });
    }

    if (!slug) {
      return NextResponse.json({ message: "Slug is required" }, { status: 400 });
    }

    // 2. Thực hiện On-demand Revalidation xóa Cache cũ
    revalidateTag("blog-posts");
    revalidatePath(`/blog/${slug}`);
    revalidatePath("/");

    return NextResponse.json({
      revalidated: true,
      now: Date.now(),
      message: `Revalidated successfully for slug: ${slug}`,
    });
  } catch (error) {
    return NextResponse.json(
      { message: "Error revalidating", error: (error as Error).message },
      { status: 500 }
    );
  }
}