NextJS gives 404 page when refreshing, but works when using next link

Hi, @typesafegh! Welcome to the Vercel Community :smile:

When using Next.js with output: "export" on Vercel, pages are only accessible by appending .html to the URL. This issue is specific to Vercel deployments.

Could you add a rewrite rule in vercel.json?

{
  "rewrites": [
    { "source": "/:path*", "destination": "/:path*.html" }
  ]
}

Then use trailingSlash: true in next.config.js:

module.exports = {
  output: 'export',
  trailingSlash: true,
}

Let us know how you get on!

3 Likes