Headless CMS + 静态站点生成：WordPress后端 + Next.js前端完整部署方案

传统WordPress将内容管理和页面渲染耦合在一起，而Headless架构将两者分离：WordPress专注内容管理，Next.js负责前端渲染，生成的静态HTML直接部署到CDN，访问速度极快。本文给出完整的实施方案。

一、Headless架构优势

二、架构设计

<code">内容层（香港VPS）：
  WordPress + WP REST API
  ↓ REST API / GraphQL
构建层：
  Next.js 静态生成（SSG/ISR）
  ↓ 生成静态HTML/JS/CSS
分发层：
  Cloudflare Pages / Vercel CDN
  ↓ 全球边缘节点分发
用户（全球）

三、WordPress后端配置

<code">

{post.featured_image_url && ( )}

); } // ISR配置：60秒后过期（可按需调整） export const revalidate = 60;

五、On-Demand ISR：WordPress更新后即时刷新

<code">// app/api/revalidate/route.ts

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

export async function POST(request: NextRequest) {
    const { secret, path } = await request.json();

    // 验证密钥（防止未授权触发重新验证）
    if (secret !== process.env.REVALIDATE_SECRET_TOKEN) {
        return NextResponse.json({ error: '无效密钥' }, { status: 401 });
    }

    if (!path) {
        return NextResponse.json({ error: '缺少path参数' }, { status: 400 });
    }

    try {
        revalidatePath(path);           // 刷新特定路径
        revalidatePath('/blog');        // 同时刷新文章列表页
        revalidatePath('/');            // 刷新首页（可能有最新文章组件）

        console.log(`已刷新页面缓存: ${path}`);
        return NextResponse.json({ revalidated: true, path });
    } catch (err) {
        return NextResponse.json({ error: '刷新失败' }, { status: 500 });
    }
}

六、部署方案

方案A：Vercel（最简单）

<code"># 安装Vercel CLI
npm install -g vercel

# 部署
vercel --prod

# 优势：零配置，全球CDN，ISR原生支持
# 劣势：免费版有函数调用次数限制

方案B：Cloudflare Pages（推荐）

<code"># next.config.js 添加Cloudflare适配器
# npm install @cloudflare/next-on-pages

# 部署到Cloudflare Pages
wrangler pages deploy .next/

# 优势：免费额度充足，全球CDN，与Cloudflare Workers集成
# 劣势：部分Next.js特性需要适配

方案C：香港VPS自托管

<code"># 在香港VPS上运行Next.js服务器
npm run build

# PM2管理
pm2 start npm --name "nextjs-blog" -- start
pm2 save && pm2 startup

# Nginx反向代理
server {
    listen 443 ssl http2;
    server_name www.yourdomain.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

七、性能优化效果

八、总结

Headless CMS架构将WordPress强大的内容管理能力与现代前端框架的极致性能结合：编辑者继续使用熟悉的WordPress界面，用户获得接近原生App的访问速度。IDC.Net的香港VPS承载WordPress内容后端，通过REST API为Next.js前端提供数据，CN2 GIA线路保障API响应速度，是构建高性能Headless CMS架构的理想基础设施。