如何在自定义Next.js服务器中导入其他Next.js应用的Bundle提供服务？

可以实现这个需求，Next.js允许通过自定义服务器加载多个独立构建的应用Bundle，下面是具体实现步骤：

1. 提前构建两个Next.js应用 #

分别在两个应用的根目录执行next build命令，生成各自的.next构建产物目录，确保应用在生产模式下可运行。

2. 搭建自定义服务器项目 #

• 创建一个新的项目目录，初始化package.json并安装依赖：

  npm init -y
  npm install next react react-dom
  

• 在项目根目录创建服务器入口文件（比如server.js）。

3. 编写自定义服务器逻辑 #

在server.js中初始化两个Next.js应用实例，根据路由规则分发请求：

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

// 初始化两个应用实例，指定各自的项目根目录（需包含构建后的.next文件夹）
const app1 = next({ dev: false, dir: '../app1' }); // 替换为app1的实际路径
const app2 = next({ dev: false, dir: '../app2' }); // 替换为app2的实际路径

// 获取每个应用的请求处理器
const handleApp1 = app1.getRequestHandler();
const handleApp2 = app2.getRequestHandler();

// 等待两个应用准备完成后启动服务器
Promise.all([app1.prepare(), app2.prepare()]).then(() => {
  const server = createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname } = parsedUrl;

    // 按路由前缀分发请求
    if (pathname.startsWith('/app1/')) {
      // 移除前缀后转发给app1，保证路由匹配正确
      req.url = pathname.replace(/^\/app1/, '') + parsedUrl.search;
      handleApp1(req, res, parsedUrl);
    } else if (pathname.startsWith('/app2/')) {
      req.url = pathname.replace(/^\/app2/, '') + parsedUrl.search;
      handleApp2(req, res, parsedUrl);
    } else {
      // 默认路由逻辑，可根据需求调整（比如指向app1或返回404）
      handleApp1(req, res, parsedUrl);
    }
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log('> 服务已启动在 http://localhost:3000');
  });
});

4. 关键注意事项 #

• 版本兼容：确保两个Next.js应用的Next.js主版本一致，避免因版本差异导致的运行时错误。
• 开发模式限制：上述代码针对生产模式（dev: false），开发模式下热重载功能可能无法正常工作，建议仅在生产环境使用该方案。
• 静态资源处理：每个应用的静态资源会自动从各自的.next/static目录加载，无需额外配置。
• 环境变量：如果两个应用需要不同的环境变量，需在构建应用时通过next build注入，或在自定义服务器中针对不同应用单独设置。

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