14

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.

enter image description here

Looking at the console in the developer tools I got this: enter image description here

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.

enter image description here

Improve this question
5
  • Hi Mike, few questions and consideration: 1. "The content of that folder is uploaded to the server" it is a static web hosting (S3, blob storage, etc) ? 2. The page account.html is inside the exported files? If so, if you open http://yourpath/account.html it opens the page? 3. "After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK)" I think is because you're doing full client side navigation (with push history from html) but once you reload the page the path /account/ is not registered. Commented Jun 5, 2020 at 12:38
  • hi @Pierfrancesco, for questions #1 and #2, yes. We are using AWS S3 for hosting the site and the account.html is between them. Also, yes we are doing client validation. Do you know how can I register the /account/, so it can render after the reload? Commented Jun 5, 2020 at 12:54
  • hello again, this is something "homemade" but helped me for the same (I think) situation. When you upload files on S3 (web site hosting enabled: docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html) try to remove .html in file extension for all files generated by export excepts for index.html. Then set ContentType to text/html for all the files you've removed the extension. Commented Jun 5, 2020 at 13:03
  • any update on this? Commented Jun 9, 2020 at 8:00
  • how can you remove .html extension when exporting nextjs static blog? Commented Jul 6, 2020 at 11:01

3 Answers 3

Reset to default
25

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,
}
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thank you for your useful link. But maybe there is a typo or the configuration is changed lately. Currently the configuration is module.exports = { trailingSlash: true, }
Fix to module.exports = { trailingSlash: true, } And it does work in Dev as well, so please fix that too and I'll upvote :)
This just worked for me! What a weird setting to cause such an issue...
0

it has been fixed update your nextjs package

 npm install next@latest

based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have

Improve this answer

Comments

0

I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.

Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.

useEffect(()=>{
        router.push(window.location.href)
    },[])
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.