如何无需iframe将Next.js应用嵌入Angular应用并生成UMD模块

一、调整Next.js配置以输出UMD模块 #

Next.js默认面向SSR/SSG场景，要生成UMD包需修改webpack配置，确保客户端代码打包为通用模块：

1. 在项目根目录创建/修改next.config.js，添加如下配置：

const path = require('path');

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 仅针对客户端代码配置UMD输出
      config.output = {
        ...config.output,
        library: {
          name: 'MyNextApp', // UMD模块的全局变量名
          type: 'umd',
          umdNamedDefine: true,
        },
        path: path.resolve(__dirname, 'dist'), // 输出目录
        filename: 'my-next-app.umd.js', // 输出文件名
      };
    }
    return config;
  },
  reactStrictMode: true,
  output: 'export', // 确保静态资源正确导出（可选，视需求调整）
};

2. 暴露初始化方法：在Next.js的根组件（如pages/_app.tsx）中导出一个用于挂载的render方法，供Angular调用：

import React from 'react';
import ReactDOM from 'react-dom/client';
import type { AppProps } from 'next/app';
import App from '../components/App'; // 替换为你的实际根组件

// 暴露给外部的挂载方法
export function render(selector: string) {
  const rootEl = document.querySelector(selector);
  if (rootEl) {
    const root = ReactDOM.createRoot(rootEl);
    root.render(<App />);
  }
}

// 本地开发时正常渲染到Next默认节点
if (typeof window !== 'undefined') {
  render('#__next');
}

二、构建Next.js UMD包 #

执行构建命令生成UMD文件：

npm run build
# 或
yarn build

构建完成后，dist目录下会生成my-next-app.umd.js。

三、在Angular中集成UMD模块 #

1. 将UMD文件复制到Angular项目的src/assets目录中。
2. 修改angular.json，在architect.build.options.scripts中添加UMD脚本路径：

"scripts": [
  "src/assets/my-next-app.umd.js"
]

3. 创建Angular组件包裹Next.js应用：

import { Component, AfterViewInit } from '@angular/core';

// 声明UMD模块的全局变量类型
declare var MyNextApp: {
  render: (selector: string) => void;
};

@Component({
  selector: 'app-next-embed',
  template: '<div id="next-app-container"></div>',
  styles: [`#next-app-container { width: 100%; min-height: 500px; }`]
})
export class NextEmbedComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 挂载Next.js应用到指定DOM节点
    MyNextApp.render('#next-app-container');
  }
}

4. 在需要嵌入的Angular页面中使用<app-next-embed></app-next-embed>标签即可。

四、关键注意事项 #

• 禁用SSR专属逻辑：Next.js的getServerSideProps、getStaticProps等服务端方法在UMD包中无法运行，需确保应用仅使用客户端逻辑。
• 样式兼容：若Next.js使用CSS Modules、Tailwind等样式方案，需确保样式被打包进UMD，或手动将样式文件复制到Angular项目中引入。
• 路由冲突：Next.js的客户端路由需与Angular路由兼容，可给Next路由添加前缀（如/next/*）或使用hash模式避免冲突。

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