Javascript js:_Next/webpack hmr request 404

本期债券的回购演示是

我尝试将Next.js与Hapi.js集成为一个插件。以下是我的next.js插件项目文件夹的主要结构：

--plugins
   |--app
        |--pages
            |--app
                |--a.js
        |--handlers
        |--public
             |--dist
        |--index.js
        |--next.config.js

下面是index.js的主要内容，大部分是关于路由注册的

const nextRenderService = next({
  dir: path.join(__dirname)
});

module.exports = {
  name: "AppService",
  version: "0.0.1",
  register: async function(server, options) {
    await nextRenderService.prepare();

    server.route({
      method: "GET",
      path: `/app/${assetPrefix}/_next/webpack-hmr`,
      handler: nextHandlerWrapper(nextRenderService)
    });

    server.route({
      method: "GET",
      path: "/app/{param*}",
      handler: defaultHandler(nextRenderService)
    });

    server.route({
      method: "GET",
      path: `/app/${assetPrefix}/_next/on-demand-entries-ping`,
      handler: nextHandlerWrapper(nextRenderService)
    });

    server.route({
      method: "GET",
      path: `/app/${assetPrefix}/_next/-/page/{param*}`,
      handler: {
        directory: {
          path: path.join(__dirname, pagesPath),
          listing: true
        }
      }
    });

    server.route({
      method: "GET",
      path: `/app/${assetPrefix}/_next/{param*}`,
      handler: {
        directory: {
          path: path.join(__dirname, distPath),
          listing: true
        }
      }
    });
  }
};

但是，当我运行服务器并访问时，页面可能会呈现成功，并且大多数脚本文件可能会加载成功。但是

\u next/webpack hmr

和

\u next/on-demand条目ping

请求状态为

404

。我注意到404状态来自Next.js，而不是Hapi.js

---

那么我的代码怎么了？如何解决此问题？

assetPrefix配置仅用于使用CDN，并且对NextJs（）是全局配置。您不想为其他事情设置它，比如修改NextJs路由器路径。如果您不打算使用CDN，请忽略此设置

// in constants/index.js
const assetPrefix = process.env.NODE_ENV === "production" 
    ? "https://cdn.mydomain.com" 
    : "";

您也不希望列出所有NextJs内部路由并使用NextJs请求处理程序来处理所有调用：

// index.js
const next = require("next");
const path = require("path");

const nextRenderService = next({
  dir: path.join(__dirname),
  dev: process.env.NODE_ENV !== "production"
});

const { defaultHandler, nextHandlerWrapper } = require("./hanlders");

module.exports = {
  name: "AppService",
  version: "0.0.1",
  register: async function(server, options) {
    // https://github.com/zeit/next.js/blob/master/examples/custom-server-hapi/server.js
    await nextRenderService.prepare();

    // handle NextJs application requests
    const handler = nextRenderService.getRequestHandler();
    server.route({
      method: "GET",
      path: "/app/{p*}",
      handler: async ({ raw, url }, h) => {
        await handler(raw.req, raw.res, url);
        return h.close;
      }
    });

    // handle NextJs private routes
    server.route({
      method: "GET",
      path: "/_next/{p*}" /* next specific routes */,
      handler: nextHandlerWrapper(nextRenderService)
    });

    // Other routes
    server.route({
      method: "GET",
      path: "/{p*}" /* catch all route */,
      handler: defaultHandler(nextRenderService)
    });
  }
};

---

你为什么要处理下一个请求？您只需定义应用程序的路由，所有其他请求都必须由next.js默认处理程序处理。但是，我希望在单个Hapi.js服务器上运行多个next.js实例。因此，我必须在

\u next/

中添加一些前缀，以区分来自不同next.js实例的

\u next

请求。我不明白这一点。您应该使用2个独立的服务器。