如何根据URL在Next.js中展示WordPress页面（无法使用无头CMS）

以下是几种无需将WordPress作为无头CMS，就能按URL分流Next.js和WordPress页面的可行方案：

方案1：Nginx反向代理（最通用的服务器端方案） #

通过Nginx配置路径规则，将不同URL前缀的请求转发到对应的服务。假设Next.js运行在localhost:3000，WordPress运行在localhost:8080：

配置示例 #

server {
    listen 443 ssl;
    server_name mydomain.com;
    # 此处添加SSL证书配置（certificate、certificate_key等）

    # 处理Next.js页面：根路径及/otherpages-link下的所有请求
    location / {
        try_files $uri $uri/ @nextjs;
    }

    location @nextjs {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 处理/blogs路径的所有请求，转发到WordPress
    location /blogs {
        # 若WordPress本身部署在根目录，需重写路径去掉/blogs前缀
        rewrite ^/blogs(/.*)?$ $1 break;
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

# 80端口跳转至HTTPS
server {
    listen 80;
    server_name mydomain.com;
    return 301 https://$host$request_uri;
}

关键注意事项 #

• 修改WordPress后台的设置→常规：将「站点地址（URL）」设为https://mydomain.com/blogs，「WordPress地址（URL）」可设为内部地址（如http://localhost:8080）或与站点地址一致。
• 若WordPress已部署在/blogs子目录，则无需添加rewrite规则，直接将proxy_pass指向对应路径即可。

方案2：Next.js内置Rewrite规则（无额外服务器配置） #

利用Next.js的rewrites配置，将/blogs前缀的请求转发到WordPress服务，适合用Vercel、Netlify等托管平台部署Next.js的场景。

配置示例（next.config.js） #

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      // 转发所有/blogs开头的请求到WordPress服务
      {
        source: '/blogs/:path*',
        destination: 'http://your-wordpress-server-url/:path*',
        // 若WordPress部署在/blogs子目录，destination改为'http://your-wordpress-server-url/blogs/:path*'
      },
    ];
  },
};

module.exports = nextConfig;

关键注意事项 #

• 确保WordPress服务允许来自Next.js服务器的请求（若在同一服务器则无需额外配置，跨服务器需确认防火墙/安全组规则）。
• 同样需正确配置WordPress的站点地址，避免内部链接、静态资源加载错误。

方案3：CDN路由规则（无需管理服务器） #

若使用Cloudflare、阿里云CDN等服务，可通过CDN的路由规则直接分流请求：

配置步骤（以Cloudflare为例） #

1. 进入Cloudflare控制台，选择对应域名，进入「规则→路由规则」。
2. 创建第一条规则：
   • 匹配条件：Hostname为mydomain.com，URI匹配/blogs/*。
   • 动作：选择「转发URL」，目标URL设为WordPress服务器地址（如https://your-wordpress-server.com/:path*），并开启「保留查询字符串」。
3. 创建第二条规则：
   • 匹配条件：Hostname为mydomain.com，URI匹配/*（排除/blogs/*）。
   • 动作：选择「转发URL」，目标URL设为Next.js服务器地址（如https://your-nextjs-server.com/:path*）。

关键注意事项 #

• 确保CDN已正确接管域名的DNS解析。
• 配置CDN的SSL证书，确保全站HTTPS访问，避免混合内容警告。

内容的提问来源于stack exchange，提问作者M Ahmed Mushtaq