Next.js多区域--开发环境中的快速刷新

Question

我目前正在使用Next.js和多个区域作为我们的网络应用，我遇到一个问题，webpackDevMiddleware只看到当前的应用程序，我正在进行更改。我使用Docker创建我的网络。我希望更改范围，以查看我的工作区中的所有应用程序，并在它们发生变化时刷新。

我的主要问题是当我访问app2并对app2进行更改时，app1没有看到为刷新屏幕而从app2更新视图所做的更改。

我确实验证了是否直接访问app2并进行更改，页面确实会刷新，但我希望开发人员访问app1并从那里路由到app2。这将使他们不需要知道哪个端口(localhost:3000，localhost:3001，localhost:3002等)。访问正确的应用程序。

这是我的next.config.js

const { APP2_URL } = process.env;

module.exports = {
   webpackDevMiddleware: (config) => {
      config.watchOptions = {
         poll: 1000,
         aggregateTimeout: 300,
      };

      return config;
   },
   output: "standalone",
   async rewrites() {
      return [
         {
            source: "/app1",
            destination: "/",
         },
         {
            source: "/app2",
            destination: `${APP2_URL}/app2`,
         },
         {
            source: "/app2/:path*",
            destination: `${APP2_URL}/app2/:path*`,
         },
      ];
   },
};

每个webapp都在自己的Docker容器中，所以我猜我需要添加额外的设置来查看app2的远程容器。任何能让我开始工作的指导都将不胜感激。

Answer 1

这最终比预期的要容易。Next.js自己处理的。确认它与预期的Next.js版本12.2.5一样工作。