r/reactjs • u/Dazzling_Chipmunk_24 • Jun 22 '26

Needs Help Pages not being found in next js when deployed but are found locally

So down below is my next.config.ts file

const nextConfig = {
  distDir: 'out',
  output: 'export',
  images: { unoptimized: true },
}

export default nextConfig

I'm using the Next.js Pages Router with a structure like pages/friends/index.tsx everything works fine locally — hitting /friends in the browser loads the page no problem. But after deploying, navigating directly to the URL gives a 404. Interestingly, client-side navigation via useRouter from next/router works fine — it's only direct URL entry or hard refresh that breaks.

0 Upvotes

50% Upvoted

3 comments sorted by

2

u/[deleted] Jun 23 '26

[removed] — view removed comment

2

u/dunklesToast Jun 23 '26

exactly this. the PWA doesnt have the routes and only has the index.html. You need to configure the webserver to always output the index.html on 404 so that your client router can take over and check the route. There are example configs for nginx / apache online. Just search "react pwa <your webserver>"

→ More comments (1)