如何在Vercel托管的Next.js子目录/articles部署WordPress？

方案一：子域名托管WordPress + Next.js反向代理/articles路径 #

• 操作步骤：
  1. 选择支持WordPress的托管服务商（如SiteGround、WP Engine等），将WordPress部署到子域名（例如blog.yourdomain.com）
  2. 在Next.js项目的next.config.js中配置路由重写，将/articles路径的请求转发到WordPress子域名：

     module.exports = {
       async rewrites() {
         return [
           {
             source: '/articles/:path*',
             destination: 'https://blog.yourdomain.com/:path*',
           },
         ]
       },
     }
     

  3. 进入WordPress后台，将「站点URL」设置为https://yourdomain.com/articles，确保内部链接不会跳转子域名
• 优势：用户访问/articles时URL保持统一，无感知子域名；Next.js与WordPress独立托管，互不影响各自的更新与维护
• 注意点：需在WordPress端配置CORS规则解决跨域问题；设置正确的canonical标签，避免SEO重复内容风险

方案二：将WordPress作为无头CMS，Next.js渲染/articles内容 #

• 操作步骤：
  1. 将WordPress部署到任意支持的托管平台（子域名或独立域名均可），确保WordPress REST API处于启用状态
  2. 在Next.js项目中，通过REST API请求获取WordPress的文章数据，在/articles路径下使用静态生成（SSG）或服务器端渲染（SSR）渲染页面：

     // 示例：静态生成文章列表页面
     export async function getStaticProps() {
       const res = await fetch('https://blog.yourdomain.com/wp-json/wp/v2/posts')
       const posts = await res.json()
       return { props: { posts }, revalidate: 86400 } // 每日重新验证缓存
     }
     

  3. 在Next.js中实现与主站风格一致的文章详情、列表页面样式
• 优势：前端体验完全统一；SEO友好，所有内容由Next.js渲染；可利用Next.js的缓存机制优化页面性能
• 注意点：需要开发对接WordPress API的逻辑；WordPress仅作为内容管理后台，前端样式需单独实现

方案三：替换为Vercel兼容的Headless CMS（可选） #

• 如果可以接受替换WordPress，可选择Contentful、Sanity等Headless CMS，直接在Vercel上与Next.js集成，/articles路径的内容由Next.js直接渲染
• 优势：无需额外托管服务，部署流程更简洁；与Vercel生态兼容度高，性能优化更便捷
• 注意点：需要迁移原有WordPress内容到新CMS，存在一定学习成本

方案选择建议 #

如果希望保留WordPress的后台操作体验，优先考虑方案一或方案二：

• 方案一适合不想过多改动前端代码、快速实现路径统一的场景
• 方案二适合追求前端体验一致性、性能优化的场景

内容的提问来源于stack exchange，提问作者Harsha M V