能否将Next.js应用打包为单个JS文件嵌入外部HTML页面？

Next.js的架构设计（依赖路由、代码拆分、SSR/SSG等特性）决定了它很难直接打包成单个独立的JavaScript文件，但你可以通过以下几种方案实现集成需求：

方案1：将目标组件打包为独立的UMD/ES模块 #

如果只是需要嵌入Next.js中的特定组件，可以单独把这些组件抽离出来，用Rollup或Webpack打包成可直接在浏览器中引入的模块：

1. 抽离要嵌入的组件，比如创建一个embed-entry.js文件，导出目标组件：

import React from 'react';
import MyNextComponent from '../components/MyNextComponent';

export { MyNextComponent };

2. 配置Rollup（或Webpack），将组件打包为UMD格式：

// rollup.config.js
import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'embed-entry.js',
  output: {
    file: 'my-component.bundle.js',
    format: 'umd',
    name: 'MyComponentLib',
    globals: {
      react: 'React',
      'react-dom': 'ReactDOM'
    }
  },
  external: ['react', 'react-dom'],
  plugins: [
    resolve(),
    commonjs(),
    babel({ presets: ['@babel/preset-react'] })
  ]
};

3. 在现有HTML页面中引入React、ReactDOM和打包后的组件，然后渲染：

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="./my-component.bundle.js"></script>

<div id="next-component-root"></div>

<script>
  const { MyNextComponent } = MyComponentLib;
  ReactDOM.createRoot(document.getElementById('next-component-root')).render(
    React.createElement(MyNextComponent)
  );
</script>

方案2：用Next.js的standalone输出模式+iframe嵌入 #

如果需要嵌入的是整个Next.js应用的某个页面，可以使用Next.js的standalone构建模式：

1. 在next.config.js中开启output: 'standalone'：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
};

module.exports = nextConfig;

2. 执行npm run build，生成的.next/standalone目录包含了可独立运行的应用代码，部署这个应用到服务器。
3. 在现有HTML页面中用iframe嵌入对应路由：

<iframe src="https://your-next-app-domain/embed-page" width="100%" height="600" frameborder="0"></iframe>

• 注意：如果需要父页面和iframe通信，可以使用postMessage API；样式隔离问题可以通过在Next.js页面中添加自定义样式或使用scoped CSS解决。

方案3：改用纯React打包（放弃Next.js全栈特性） #

如果你的组件没有用到Next.js的专属特性（如SSR、App Router、API路由等），可以直接把组件迁移到纯React项目中，用Vite或Create React App打包成单文件：

1. 创建一个纯React项目，把Next.js组件复制过来（注意移除Next.js专属API，如next/image、next/link等，替换为原生React或第三方库）。
2. 用Vite打包成UMD格式：在vite.config.js中配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/embed-entry.js',
      name: 'MyComponentLib',
      formats: ['umd'],
      fileName: (format) => `my-component.${format}.js`
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
});

3. 打包后得到的UMD文件可以直接在现有HTML中引入并渲染，步骤同方案1。

关于next export的说明 #

你尝试的next export生成的是静态站点资源，包含拆分的JS chunk、CSS文件、静态HTML等，这是Next.js为了优化加载性能而做的代码拆分设计，无法直接合并为单个JS文件，因此不适合你的需求。

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