Next.js:_next/webpack-hmr 请求 404

Posted 2023-03-07

【中文标题】Next.js:_next/webpack-hmr 请求 404

【英文标题】：Next.js:_next/webpack-hmr request 404

【发布时间】：2019-02-11 05:03:47

【问题描述】：

本期demo repo为https://github.com/hh54188/happy-server/tree/issue-demo

我尝试将 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
        
      
    );
  
;

但是，当我运行服务器并访问http://127.0.0.1:4000/app/a 时，页面可以渲染成功，并且大多数脚本文件都可以加载成功。但是_next/webpack-hmr 和_next/on-demand-entries-ping 的请求状态是404。我注意到 404 状态来自 Next.js，而不是 Hapi.js

那么我的代码有什么问题？我该如何解决这个问题？

【问题讨论】：

为什么要处理下一个请求？您只需要定义应用程序的路由，所有 else 请求都必须由 next.js 默认处理程序处理。

【参考方案1】：

assetPrefix 配置仅用于使用 CDN，对 NextJs (documentation) 是全局的。您不想将其设置为其他内容，例如修改 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)
    );
  
;

【讨论】：

但是，我想在单个 Hapi.js 服务器上运行多个 next.js 实例。所以我必须在_next/ 中添加一些前缀来区分来自不同Next.js 实例的_next 请求

好吧，我不明白。那么你应该使用 2 个单独的服务器。

【参考方案2】：

在升级 nextjs 11 > 12 之后就出现了这个问题。

这对我有帮助：

npm install webpack-dev-server -g

来源：https://***.com/a/31627310/