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 ?
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)
});
}
};
The issue has arisen right after upgrading nextjs 11 > 12.
This helped me:
npm install webpack-dev-server -g
source: https://coderedirect.com/questions/541528/webpack-hmr-webpack-hmr-404-not-found
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.