[英]Next.js custom config resulting in 404 on index - next-images, next-css, webpack, lquip-loader
[英]Next.js:_next/webpack-hmr request 404
本期的演示倉庫是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
那么我的代碼有什么問題? 我怎么解決這個問題 ?
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)
});
}
};
升級 nextjs 11 > 12 后問題就出現了。
這幫助了我:
npm install webpack-dev-server -g
來源: https : //coderedirect.com/questions/541528/webpack-hmr-webpack-hmr-404-not-found
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.