如何让Next.js 13（App Router）特定组件无需iframe嵌入第三方站点？

可用的npm包方案 #

使用@widget-js/core #

这个轻量库可以快速将React组件转换为可嵌入的独立小部件，支持通过全局配置传递参数：

1. 安装依赖：

   npm install @widget-js/core
   

2. 在项目中创建小部件入口文件（如app/widget/calendar.tsx），注册你的组件并绑定全局配置：

   'use client';
   import { Widget } from '@widget-js/core';
   import Calendar from '../../components/Calendar';
   
   // 注册小部件，读取window上的配置作为props
   Widget.register('calendar-widget', (props) => {
     const config = window.calendarConfig || {};
     return <Calendar {...config} {...props} />;
   });
   

3. 修改next.config.js，配置打包输出为独立脚本，部署后即可通过指定URL让其他网站引入。

手动实现方案（无额外依赖） #

手动实现更灵活，完全可控，步骤如下：

1. 创建组件的嵌入入口脚本 #

新建embed-calendar.tsx文件，负责读取全局配置、创建渲染容器并渲染组件：

'use client';
import React from 'react';
import ReactDOM from 'react-dom/client';
import Calendar from './components/Calendar';

// 获取嵌入脚本的DOM元素，用于读取自定义属性
const scriptEl = document.getElementById('calendar-widget');
// 优先使用用户指定的容器，没有则自动创建
const containerId = scriptEl?.dataset.container || 'calendar-widget-container';
let container = document.getElementById(containerId);

if (!container) {
  container = document.createElement('div');
  container.id = containerId;
  document.body.appendChild(container);
}

// 读取全局配置
const config = window.calendarConfig || {};

// 渲染组件
ReactDOM.createRoot(container).render(
  <React.StrictMode>
    <Calendar userId={config.userId} />
  </React.StrictMode>
);

2. 配置Next.js打包规则 #

修改next.config.js，添加webpack配置将入口脚本打包为UMD格式（支持全局引入）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 添加自定义入口
      config.entry['embed-calendar'] = './embed-calendar.tsx';
      // 配置输出格式
      config.output.filename = '[name].js';
      config.output.library = {
        type: 'umd',
        name: 'CalendarWidget',
      };
    }
    return config;
  },
};

module.exports = nextConfig;

3. 部署与嵌入 #

部署项目后，其他网站即可通过以下方式嵌入你的组件：

<!-- 可选：指定自定义容器 -->
<div id="my-custom-calendar"></div>

<!-- 全局配置 -->
<script>
  window.calendarConfig = {
    userId: "xxxx",
  }
</script>

<!-- 引入你的小部件脚本 -->
<script 
  src="https://你的域名/embed-calendar.js" 
  id="calendar-widget"
  data-container="my-custom-calendar"
></script>

注意事项 #

• 样式处理：确保组件样式被正确打包，使用CSS-in-JS（如Tailwind、styled-components）可以避免样式丢失问题。
• 跨域API：如果组件需要调用你的后端接口，需在API配置中开启CORS，允许嵌入网站的域名访问。
• 浏览器兼容：Next.js默认会处理基础兼容，若需支持旧浏览器，可在next.config.js中配置browserslist。

内容的提问来源于stack exchange，提问作者Fakhrul Islam Fuad