重新加载/刷新操作时出现 Nextjs 404 错误 [英] Nextjs 404 error on reload/ refresh action

问题描述

我将 Nextjs 用于前端应用程序，将 dotnet core 3.1 用于 Web API.有些页面是静态的，有些是动态的，我按照官方

查看开发人员工具中的控制台，我得到了这个:

我发现这个 Stackoverflow

解决方案

我在构建和导出后的所有页面都有.html"时遇到类似的问题.扩展名.我通过 next.config.js 文件中的以下代码解决了它.

next.config.js

module.exports = {exportTrailingSlash:真，}

注意:请勿在开发过程中使用上述代码.在构建项目之前使用它.

您可以在此处找到文档链接:https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.

更新

上面的代码是我当时使用的 next.js v9.3.4.对于较新版本，应根据文档使用以下代码.

next.config.js

module.exports = {trailingSlash:真，}

I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.

However, when publishing the Nextjs app following this steps:

1. yarn build
2. yarn export
3. An out folder is generated at the root of the project
4. The content of that folder is uploaded to the server

After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.

Looking at the console in the developer tools I got this:

I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.

Is there a way to fix this from the client side? Might be a configuration is missing?

The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.

解决方案

I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.

next.config.js

module.exports = {
  exportTrailingSlash: true,
}

Note: Do not work with the above code while in development. Use it just before building the project.

You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.

UPDATE

The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.

next.config.js

module.exports = {
  trailingSlash: true,
}

这篇关于重新加载/刷新操作时出现 Nextjs 404 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！