如何在Next.js页面中嵌入WordPress页面？求替代iframe的更佳方案

1. 通过WordPress REST API获取内容并渲染 #

WordPress默认启用REST API，你可以直接请求对应产品页面的内容，在Next.js中解析渲染：

• 找到目标WordPress页面的API端点，比如根据slug匹配的请求地址：https://你的WP站点域名/wp-json/wp/v2/pages?slug=product-${productId}
• 在Next.js的products/[id]页面中，通过服务端或组件内异步请求获取WP页面内容：
  示例（App Router写法）：

  async function fetchWpProductContent(productId) {
    const res = await fetch(`https://你的WP站点域名/wp-json/wp/v2/pages?slug=product-${productId}`);
    const pages = await res.json();
    return pages[0]?.content?.rendered || '';
  }
  
  export default async function ProductPage({ params }) {
    const wpContent = await fetchWpProductContent(params.id);
    return (
      <div className="product-container">
        {/* 主产品信息区域 */}
        <section className="main-product-info">...</section>
        {/* WordPress/Divi生成的内容 */}
        <section className="wp-divi-content" dangerouslySetInnerHTML={{ __html: wpContent }} />
      </div>
    );
  }
  

• 注意事项：需要将Divi生成的必要CSS引入Next.js项目，避免样式丢失；同时要处理跨域问题，可在WP端配置CORS规则，或在Next.js中设置反向代理。

2. 静态导出Divi内容复用 #

如果Divi内容不需要实时更新，可直接导出静态资源复用：

• 在Divi编辑器中导出目标页面的HTML和CSS文件
• 将导出的CSS整合到Next.js的全局样式或组件样式中
• 在products/[id]页面通过dangerouslySetInnerHTML直接引入HTML内容，或拆分HTML为React组件复用

3. 基于Divi扩展REST API定制渲染 #

Divi支持扩展REST API，可以获取结构化的模块数据而非完整HTML：

• 安装Divi官方或第三方的REST API扩展插件
• 通过API获取Divi模块的结构化数据，用React组件重新渲染这些模块
• 这种方式能完全自定义样式，和Next.js项目风格统一，但需要额外开发成本

方案优势对比iframe #

• 解决iframe的样式隔离、窗口适配、SEO不友好等问题
• 内容与主页面完全融合，用户体验更流畅
• 可灵活自定义内容展示样式，保持项目设计一致性

内容的提问来源于stack exchange，提问作者David Díaz