如何将WordPress博客页面集成到Next.js的products/[id]路由（含Node.js后端）

一、优化WordPress REST API集成方案（最推荐） #

这是平衡SEO、样式一致性和开发成本的最优选择，可针对性解决你之前遇到的问题：

1. 保留WordPress SEO元数据 #

• 通过REST API获取博客页面的yoast_head（Yoast SEO插件）或rank_math_seo（Rank Math插件）字段，提取其中的title、meta描述、Open Graph等SEO标签，在Next.js的products/[id]页面用next/head组件注入，完全复用WordPress的SEO配置。
• 示例代码：

import Head from 'next/head';
import { getServerSideProps } from 'next';

export async function getServerSideProps(context) {
  const { id } = context.params;
  // 根据产品ID关联到对应WordPress博客的slug或ID
  const relatedBlogSlug = getRelatedBlogSlug(id); // 自定义关联逻辑
  const blogRes = await fetch(`https://your-wordpress-site/wp-json/wp/v2/posts?slug=${relatedBlogSlug}`);
  const blogData = await blogRes.json();
  const seoData = blogData[0].yoast_head; // 对应SEO插件的字段

  return {
    props: { productData, blogData, seoData }
  };
}

export default function ProductPage({ productData, blogData, seoData }) {
  return (
    <>
      <Head>
        {/* 注入WordPress生成的SEO内容 */}
        <dangerouslySetInnerHTML={{ __html: seoData }} />
      </Head>
      {/* 产品主信息区域 */}
      <div className="product-main">
        {/* 渲染产品内容 */}
      </div>
      {/* 关联博客内容区域 */}
      <div className="blog-content">
        <h2>{blogData[0].title.rendered}</h2>
        <div dangerouslySetInnerHTML={{ __html: blogData[0].content.rendered }} />
      </div>
    </>
  );
}

2. 统一样式处理 #

• 提取WordPress主题的基础样式（字体、间距、颜色），合并到Next.js的全局样式文件中；
• 给博客内容容器添加自定义类名，用CSS重置WordPress默认样式，替换为Next.js项目的样式规范：

.blog-content p {
  margin: 1rem 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-color);
}
.blog-content h2 {
  font-size: 1.8rem;
  margin: 2rem 0 1rem;
  color: var(--primary-color);
}
.blog-content img {
  max-width: 100%;
  border-radius: 4px;
}

3. 无缝集成细节 #

• 处理内部链接：将WordPress内容中的站点内链接替换为Next.js路由格式，避免跳转到外部；
• 图片优化：用Next.js的next/image组件替换博客内容中的<img>标签，提升加载性能同时保持样式统一。

二、借助官方/第三方集成库简化开发 #

1. @wordpress/block-library #

如果用WordPress区块编辑器，可引入该库直接渲染区块内容，完美还原编辑结构，同时自定义区块样式适配Next.js项目：

import { Paragraph, Heading, Image } from '@wordpress/block-library';

function renderBlock(block) {
  switch (block.name) {
    case 'core/paragraph':
      return <Paragraph attributes={block.attributes}>{block.innerContent}</Paragraph>;
    case 'core/heading':
      return <Heading attributes={block.attributes}>{block.innerContent}</Heading>;
    case 'core/image':
      return <Image attributes={block.attributes} />;
    default:
      return null;
  }
}

// 在页面中渲染区块
<div className="blog-content">
  {blogData[0].blocks.map(renderBlock)}
</div>

2. next-wordpress #

该库封装了REST API调用、SEO元数据处理、区块渲染等功能，只需配置WordPress站点地址，即可快速实现集成，同时保留WordPress的SEO特性，样式可通过自定义CSS覆盖。

三、不推荐的方案 #

• iFrame集成：样式无法统一、SEO无法共享、用户体验差，完全不符合需求；
• 全站点无头WordPress重构：仅单个路由需要集成博客时，重构成本过高，优化REST API方案已足够满足需求。

内容的提问来源于stack exchange，提问作者Pavan G R