如何将Next.js组件注入到外部HTML页面的指定容器中？

1. 准备可嵌入的组件 #

创建纯React组件（避免使用Next.js专属API，如useRouter、服务端渲染相关方法），示例：

// src/components/EmbedComponent.jsx
export default function EmbedComponent() {
  return (
    <div style={{ padding: '20px', backgroundColor: '#f0f0f0' }}>
      <h2>我是Next.js打包的嵌入组件</h2>
      <p>可以在外部HTML页面中渲染</p>
    </div>
  );
}

2. 创建嵌入入口文件 #

编写专门的客户端渲染入口，模拟React的渲染逻辑：

// src/embed-entry.jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import EmbedComponent from './components/EmbedComponent';

// 等待DOM加载完成后渲染组件
document.addEventListener('DOMContentLoaded', () => {
  const rootContainer = document.getElementById('root');
  if (rootContainer) {
    const root = createRoot(rootContainer);
    root.render(
      <React.StrictMode>
        <EmbedComponent />
      </React.StrictMode>
    );
  }
});

3. 打包独立Bundle #

使用@vercel/ncc将入口文件及依赖打包成单个JS文件：

• 安装依赖：

  npm install @vercel/ncc --save-dev
  

• 在package.json添加打包脚本：

  "scripts": {
    "build:embed": "ncc build src/embed-entry.jsx -o dist/embed"
  }
  

• 执行打包：

  npm run build:embed
  

  执行后会在dist/embed目录生成index.js（组件JS bundle）和index.css（组件样式，如果有的话）。

4. 在外部HTML中引入组件 #

创建test.html，引入打包后的文件并指定渲染容器：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>测试嵌入Next.js组件</title>
  <!-- 引入组件样式（如果有） -->
  <link rel="stylesheet" href="./dist/embed/index.css">
</head>
<body>
  <!-- 渲染容器 -->
  <div id="root"></div>
  <!-- 引入组件JS bundle -->
  <script src="./dist/embed/index.js"></script>
</body>
</html>

注意事项 #

• 组件中不能使用Next.js专属API（如路由、服务端数据获取、next/image等），只能使用纯React特性。
• 如果组件依赖第三方库，ncc会自动将其打包进bundle，无需外部引入。
• 若需要传递参数给嵌入组件，可以通过window对象或者自定义DOM属性实现，比如在HTML中给root容器加data-prop="xxx"，然后在入口文件中读取：rootContainer.dataset.prop。

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