Next.js:_next/webpack-hmr request 404

Question

This issue's demo repo is https://github.com/hh54188/happy-server/tree/issue-demo

I try to integrate Next.js with Hapi.js as a plugin. Here is my next.js plugin project folder main structure:

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

And here is index.js main content, most for route register

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
        }
      }
    });
  }
};

However, when I run the server, and visit http://127.0.0.1:4000/app/a, the page could render success, and most script file could load successful. But the _next/webpack-hmr and the _next/on-demand-entries-ping requests status is 404. And I notice the 404 status is from Next.js, not Hapi.js

So what's wrong with my code ? How can I solve this problem ?

Why are you handling next requests? You only have to define the routes of the application, every else request has to be handled by the next.js default handler. — giggi__
– giggi__, Commented Sep 10, 2018 at 12:20

DavidW · Accepted Answer · 2021-11-28 13:04:09Z

1

The issue has arisen right after upgrading nextjs 11 > 12.

This helped me:

npm install webpack-dev-server -g

source: https://stackoverflow.com/a/31627310/

edited Nov 28, 2021 at 13:04

DavidW

31.2k7 gold badges64 silver badges99 bronze badges

answered Nov 2, 2021 at 8:06

Rich

82110 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Clément Prévost · Accepted Answer · 2018-09-08 15:21:53Z

0

The assetPrefix configuration is for using a CDN only and is global to NextJs (documentation). You don't want to set that for something else, like modifying the NextJs router paths. If you don't plan on using a CDN, just ignore this setting.

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

You also do not want to list all NextJs internal routes and use the NextJs request handler to handle all calls:

// 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)
    });
  }
};

answered Sep 8, 2018 at 15:21

Clément Prévost

8,6702 gold badges39 silver badges55 bronze badges

2 Comments

hh54188 Over a year ago

However, I want to run multiply next.js instances on a single Hapi.js server. So I have to add some prefix to the _next/ to diff the _next request from different Next.js instances

Clément Prévost Over a year ago

ok i did not understand that. you should be using 2 separate server then.

Collectives™ on Stack Overflow

Next.js:_next/webpack-hmr request 404

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related