Can't access my pages by URL, only by links in next js [duplicate]

Question

I have an application built with next JS. It works fine in development, but when published to the internet, I have a problem. The only way I can access the pages in the application are by the links on the home page, that link to those pages. For example, I get a 404 error if I type in www.example.com/about, but if I click the link that routes to it, everything is fine.

Answer 1

I was also having a similar problem.

Configuring the trailingSlash in next configuration worked for me.

In the root of your project in next.config.js try adding:

module.exports = {
  trailingSlash: true,
}

Answer 2

I couldn't comment because of my experience point. Could you share your code for higher components/pages? For now what I understand is your browser can't fetch the data before render, so you get an error. It' is a wild guess but maybe you can add a condition to your components(for example for url/about let's say you render about() component) that

if (!data){ return <div>Loading</div>}  

This is an approach that I used at React apps(never used next) but since they are quite similar it might help you.