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

[typesafegh]

when using nextjs with the config output: "export" pages are only accessible if you write .html in the url.

So let’s say I have page called /test/page.tsx
the only way to access it is /test.html
/test will only work if you access it trough a next/link

Note that the page works fine when using serve and all the routes work normally, same when using any other platform. The issue is only with vercel

Deployment URL or Custom Domain: Private
Environment (local, preview, production): production
Project Framework: NextJS@14.2.15
Build Settings: Turbo + NextJS build with output: “export”
Framework Preset:
Build Command (if not default):
Output Directory (if not default):
Install Command (if not default):
Node/Runtime Version: Node 20
Package Manager: pnpm
Relevant Packages: none (I am using next-mdx with mdxRs but I tested without it and the issue is still there)

[pawlean (Pauline P. Narvas)]

Hi, @typesafegh! Welcome to the Vercel Community

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!

[typesafegh]

This solved it Thanks!