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.
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.
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,
}