404 error after page refresh in development/non-prod environment

[kaleshasheik]

Hi,
In my React.js application, I have integrated with Next.js.
On button click action, I have written code to push to new route.

Behavior:
On button click, its redirecting to dashboard route correctly. But, when I reload/refresh the page I am getting 404 error. Not sure, why Request URL change is different here.

Request URL after clicking button:
https://dev.nonprod.mem.cloud.com/_next/static/wqu4eCNPX--dTTk67LnKG/pages/dashBoard.js

Request URL after page reload:
https://dev.nonprod.mem.cloud.com/dashBoard?customerId=100

I am using like this to push the route.

Router.push({
pathname: '/dashBoard',
query: {customerId: 100}
});

[jamesmosier]

The request URL changes because when using next/router and doing client side routing, Next just needs to fetch that requested page's JavaScript bundle. But when you reload the page and the page is requested server side, it needs to render the entire application including the page requested.

Do you happen to have a repository or example you could share with a similar setup that is failing?

[kaleshasheik]

The request URL changes because when using next/router and doing client side routing, Next just needs to fetch that requested page's JavaScript bundle. But when you reload the page and the page is requested server side, it needs to render the entire application including the page requested.

Do you happen to have a repository or example you could share with a similar setup that is failing?

This behavior observed only when I deploy my application in cloud. No issue when I run it locally.

[jamesmosier]

These are incredibly difficult to help with without a repository where this can be reproduced. It could be anything from the setup in your repository to your proxy to your server and anything and everything in between.

Do you have code you could share?

[jamesmosier]

Also i just noticed you already posted this yesterday: #13754

Try to keep all the information in 1 discussion when it relates to the same issue.

[buhama]

You have to make sure to use getStaticPaths guide can be found in the next docs https://nextjs.org/learn/basics/dynamic-routes

[landed1]

I am experiencing a similar issue however deployment method changes behaviour. On github pages the application pages can be refreshed such as https://landed1.github.io/laptop-reviews/2025/1/best-laptops-under-500 vs the live static deployment here - https://laptop-review.co.uk/2025/1/best-laptops-under-500/

I am copying the files such as about.html which get created. So the app can locate /about but on refresh the server loses them but it can see them if it is /about.html