如何将Next.js与InMotion上的WordPress站点对接并配置前端？

嘿，我来帮你理清这个思路——其实你要搭建的是无头WordPress架构：把WP纯当内容存储和API后端，Next.js完全独立做前端渲染，和传统把主题上传到WP的玩法不一样，下面给你拆解具体步骤：

传统WP主题依赖WP的PHP渲染，但你要做的是分离式架构：WP只负责在后台管理内容，通过API把数据传给Next.js，Next.js自己渲染页面。所以不需要把Next.js文件传到WP的wp-content/themes目录里，两者是独立的服务（可以部署在同一服务器的不同位置，也可以分开部署）。

有两种主流方案，看你需求选：

• 方案1：和WP部署在同一服务器的子域名/子目录
  比如把WP放在主域名yourdomain.com，Next.js部署在app.yourdomain.com（子域名更清晰）。操作步骤：
  1. 登录InMotion的cPanel，新建一个子域名（比如app.yourdomain.com），指定它的根目录（比如public_html/app）
  2. 本地开发完Next.js后，运行npm run build（如果是静态导出，要先在next.config.js里加output: 'export'），生成out文件夹
  3. 用FTP或者cPanel的文件管理器，把out里的所有文件上传到子域名的根目录
• 方案2：部署在Vercel/Netlify等前端平台
  这种更省心，Next.js官方推荐Vercel，直接把代码仓库关联上去，自动构建部署。然后WP还是放在InMotion上，两者通过API跨域通信（需要在WP里配置CORS，比如装WP CORS插件允许前端域名访问）

1. 开启WP的API服务 #

WP默认自带REST API，你可以先测试：访问yourdomain.com/wp-json/wp/v2/posts，如果能看到文章的JSON数据，说明API正常。如果需要更灵活的查询（比如关联分类、自定义字段），可以装WPGraphQL插件，用GraphQL来获取数据，比REST更高效。

2. 在Next.js中获取WP数据 #

Next.js提供几种数据获取方式，根据你的内容更新频率选：

• 静态生成（SSG）：适合博客、文档这类不常更新的内容，构建时生成静态页面，速度最快。示例代码：

  // pages/posts.js
  export async function getStaticProps() {
    // 调用WP的REST API获取文章列表
    const res = await fetch('https://yourdomain.com/wp-json/wp/v2/posts?per_page=10')
    const posts = await res.json()
    return {
      props: { posts },
      revalidate: 3600 // 每1小时重新生成页面，实现增量更新
    }
  }
  
  export default function PostsPage({ posts }) {
    return (
      <div className="posts-container">
        <h1>我的博客</h1>
        {posts.map(post => (
          <article key={post.id}>
            <h2>{post.title.rendered}</h2>
            {/* 渲染WP的富文本内容 */}
            <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
          </article>
        ))}
      </div>
    )
  }
  

• 服务器端渲染（SSR）：适合实时更新的内容，每次请求都从WP拉取最新数据，用getServerSideProps代替getStaticProps即可。

3. 处理路由匹配 #

比如WP的文章slug是my-first-post，Next.js可以建pages/posts/[slug].js页面，通过getStaticPaths获取所有WP文章的slug，生成对应的静态页面：

// pages/posts/[slug].js
export async function getStaticPaths() {
  const res = await fetch('https://yourdomain.com/wp-json/wp/v2/posts')
  const posts = await res.json()
  const paths = posts.map(post => ({
    params: { slug: post.slug }
  }))
  return { paths, fallback: 'blocking' }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://yourdomain.com/wp-json/wp/v2/posts?slug=${params.slug}`)
  const post = await res.json()
  return { props: { post: post[0] } }
}

export default function PostPage({ post }) {
  return (
    <div className="post-page">
      <h1>{post.title.rendered}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
    </div>
  )
}

如果你希望用户访问yourdomain.com看到Next.js前端，而WP后台在yourdomain.com/wp-admin，可以这么操作：

1. 把WP的所有文件移到服务器的wp子目录（比如public_html/wp）
2. 登录WP后台，进入「设置」→「常规」，修改：
   • WordPress地址（URL）：https://yourdomain.com/wp
   • 站点地址（URL）：https://yourdomain.com
3. 把Next.js的out文件夹内容上传到public_html（主域名根目录）
   这样用户访问主域名看到的是Next.js，后台还是正常通过/wp-admin登录。

• 确保服务器支持Node.js：InMotion的cPanel里有「Node.js Selector」，安装16.x以上的版本（Next.js要求的最低版本）
• 生产环境推荐用静态导出：不需要运行Node.js进程，直接上传静态文件即可，更稳定省资源
• 如果需要处理CORS跨域：装WP的WP CORS插件，添加你的Next.js域名到允许列表

内容的提问来源于stack exchange，提问作者martinpsz