Next.js links aren't working when deployed on Firebase

Question

I deployed my project on Firebase, but the links aren't working as they should be. Locally everything is working fine and paths like /account for example work, but when deployed only /account.html is working. Why is this? And can I fix this?

I first build my project with:

npm run build && npm export

Then use:

firebase deploy

to deploy.

Answer 1

This is late but I had a similar problem and found the below fix worked nicely for firebase too.

Add the below to your next.config.js

module.exports =   {
  trailingSlash: true,
}

Essentially next now generates an index.html in a folder for each page and the url now ends with a /, e.g. acmecorp.com/about/

This has more detail,

(Next.js: How to make links work with exported sites when hosted on AWS Cloudfront?