如何将带ISR的Next.js调查应用打包为JS组件或npm包？

我用Next.js结合增量静态再生（ISR）做了一个调查应用，目前部署在Vercel上，通过getStaticProps和getStaticPaths调用调查及问题API。借助ISR可以动态加载调查步骤，API结构变更时还能自动重新生成内容，只需要一个页面就能适配所有调查和问题类型。

项目结构如下：

- src 
  - pages
    - [surveyid]
      - [...question].tsx

通过Next.js路由实现不同调查问题的跳转（比如/surveyid/question-1），在Vercel生产环境运行完全正常。

现在我想把它打包成单入口文件（比如index.js），发布到npm或者部署到自有服务器，这样就能通过npm安装或者<script>标签嵌入到其他项目里，还能指定调查ID这类配置。但遇到了几个问题：

• next build会生成多入口文件，不符合单文件需求
• next export不支持ISR（官方文档明确说明）
• 尝试用rollup打包成单文件，但不确定会不会破坏Next.js路由、动态渲染和重新验证功能，同时还想保留Next.js中间件获取请求头地理位置的特性

目前核心需求是让调查能在其他项目里正常渲染，想问：

1. 有没有办法在保留ISR的前提下实现单文件打包？
2. 是否需要创建入口文件从Vercel服务器获取静态文件作为替代方案？

一、直接打包单文件并保留ISR不可行 #

Next.js的ISR依赖其服务器端的缓存机制、路由映射和静态内容更新逻辑，next build生成的是多文件的SSR/ISR产物，包含页面组件、路由解析模块、缓存管理代码等，这类产物无法被rollup等工具简单打包成单文件而不破坏原有功能。另外，Next.js中间件的请求头处理也依赖其专属的服务器运行环境，单文件打包后很难完整保留这部分特性。

二、推荐方案：独立部署+嵌入集成（完全保留ISR） #

如果要保留ISR和中间件的全部特性，最可行的方式是把调查应用作为独立服务继续部署（比如留在Vercel或迁移到自有Node.js服务器），然后通过以下方式嵌入到其他项目：

• iframe直接嵌入：外部项目通过<iframe>标签加载你的调查应用，通过URL参数传递调查ID，示例：

  <iframe 
    src="https://your-deployed-app.com/xxx-survey-id/question-1"
    style="width:100%; height:600px; border:none;"
  ></iframe>
  

  这种方式完全保留ISR自动更新、路由跳转等所有原有功能，实现成本极低。
• 自定义Web Component封装：把iframe封装成自定义组件，提供更友好的配置API，示例：

  class SurveyEmbed extends HTMLElement {
    connectedCallback() {
      const surveyId = this.getAttribute('survey-id');
      const initialQuestion = this.getAttribute('initial-question') || 'question-1';
      const iframe = document.createElement('iframe');
      iframe.src = `https://your-deployed-app.com/${surveyId}/${initialQuestion}`;
      iframe.style.width = '100%';
      iframe.style.height = '600px';
      iframe.style.border = 'none';
      this.appendChild(iframe);
    }
  }
  customElements.define('survey-embed', SurveyEmbed);
  

  外部项目只需引入该组件，通过<survey-embed survey-id="xxx"></survey-embed>即可快速嵌入，还能轻松扩展更多配置项。

三、npm包方案（需放弃ISR特性） #

如果必须做成npm包形式，只能放弃ISR的静态生成和自动更新能力，改用纯客户端渲染：

1. 将原页面组件改造为纯React组件，移除getStaticProps和getStaticPaths，在客户端通过API请求实时获取调查数据。
2. 用rollup或webpack将组件打包为UMD格式，支持npm安装导入和<script>标签直接引入两种方式。
3. 客户端路由逻辑需自行处理，比如用React Router或自定义参数解析，根据传入的调查ID和问题参数渲染对应内容。
   这种方式会失去ISR的性能优势，所有数据请求都在客户端发起，但能满足嵌入其他项目的需求。

四、从Vercel获取静态文件的替代方案 #

该方案本质和静态资源引入类似，你可以将Vercel生成的静态文件作为CDN源供外部项目加载，但无法保留ISR的动态重新验证功能——静态文件生成后就是固定的，除非手动触发重新生成，且路由逻辑需要外部项目额外处理，整体体验不如iframe嵌入方案直接。

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