如何在单个WordPress页面中集成Next.js应用？

方案一：静态导出Next.js应用后通过iframe嵌入 #

这种方式简单直接，适合不需要和WordPress深度交互的场景：

1. 配置Next.js静态导出：在项目根目录的next.config.js中添加以下配置，让Next.js可以生成纯静态文件

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}
module.exports = nextConfig

2. 执行npm run build，项目会生成out目录，里面是完整的静态页面资源
3. 将out目录下的所有文件上传到你的WordPress插件目录中，比如/wp-content/plugins/your-custom-plugin/next-static-app/
4. 在插件中注册短代码，用于输出iframe嵌入代码：

function embed_next_static_app() {
    $app_path = plugins_url('/next-static-app/index.html', __FILE__);
    return '<iframe src="' . esc_url($app_path) . '" width="100%" height="800px" frameborder="0" scrolling="auto"></iframe>';
}
add_shortcode('embed_next_static', 'embed_next_static_app');

5. 在需要嵌入的WordPress页面中插入短代码[embed_next_static]即可加载Next.js应用

注意：如果Next.js应用包含客户端路由，iframe内的跳转不会影响父页面；若需要和WordPress共享状态，可通过postMessage API实现跨iframe通信。

方案二：打包Next.js组件为纯前端资源，直接挂载到WordPress页面 #

适合需要和WordPress深度交互（比如调用WP REST API、共享登录状态）的场景，能保留SEO友好性：

1. 将Next.js页面改造为可独立打包的React组件，去掉Next.js的路由、SSR等服务端相关逻辑，用webpack或Vite打包成UMD格式的JS/CSS资源
2. 将打包后的app.js和app.css上传到插件目录，比如/wp-content/plugins/your-custom-plugin/next-component/dist/
3. 在插件中注册并加载这些资源：

function enqueue_next_component_assets() {
    // 依赖WordPress内置的React库，避免重复加载
    wp_enqueue_script('next-component', plugins_url('/dist/app.js', __FILE__), array('wp-element'), '1.0.0', true);
    wp_enqueue_style('next-component-style', plugins_url('/dist/app.css', __FILE__), array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'enqueue_next_component_assets');

4. 注册短代码提供挂载点并初始化组件：

function render_next_component() {
    return '<div id="next-component-root"></div><script>document.addEventListener("DOMContentLoaded", () => { window.NextComponent.mount("#next-component-root"); });</script>';
}
add_shortcode('render_next_component', 'render_next_component');

5. 在WordPress页面中插入短代码[render_next_component]，即可直接在页面中渲染Next.js组件

关键注意事项 #

• Next.js的SSR/SSG特性在嵌入WordPress时无法完全复用，因为WordPress本身是服务器渲染框架，所以静态导出或纯前端组件是更务实的选择
• 若需要SEO友好，优先选择方案二，因为iframe内的内容搜索引擎抓取优先级较低，而直接渲染的组件内容会被搜索引擎正常抓取
• 注意样式冲突：Next.js的全局样式可能和WordPress主题样式冲突，建议使用CSS Modules或Tailwind CSS的前缀配置做样式隔离

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