Redirects in Next.js app on Digital Ocean not working and must use .html suffix for all pages

Question

Is there a way to deploy a Next.js static site on Digital Ocean and get it to work "normally"?

I got an app deployed but every page has to be accessed via the .html suffix, and redirects specified in next.js.config don't seem to work. This breaks a lot of use-cases, and before I go back to Netlify, I wanted to make sure this isn't just a me problem.

I did follow the guide here to generate a static site.

Answer 1

When you export your Next.js site as static (as opposed to running it with node.js), you are serving static HTML, CSS and JS. That's why the redirects in next.config.js don't work.

To get those redirects working, there are multiple ways:

1. Serving the Next.js site with node.js

Next.js' all features including redirects will work if you run and serve it with node.js. How you can do is described in the "Deploying Next.js as a Custom Server" section of the page you shared.

2. Configuring your web server to handle the redirects

Since you didn't share what you use as web server, I can't add any details. But for example, searching "nextjs nginx redirect" might help in case you are using nginx.

Answer 2

This is because the generated files are in the form locations/new-york.html and so the .html extension is required for the CDN to locate the files. Fortunately there’s a configurable Next.js setting that turns these generated files into directories like locations/new-york/index.html which will allow you to use site.com/locations/new-york to access them.

To enable this option, add the following to next.config.js:

module.exports = {
  trailingSlash: true,
}

Reference: https://www.digitalocean.com/community/questions/next-js-static-site-requires-html-extension-in-url-for-dynamic-routes