Related

Why am I getting a Deploy Error: Health Checks? Question Question
How can I see the build logs for my application if the build was skipped for a deployment? Question Question

Question

Next.js Static Site Requires .html extension in URL for Dynamic Routes

Posted October 30, 2020 746 views
DigitalOcean App Platform

Hi,

I haven’t quite figured out why this is happening (and therefore don’t have a solution yet), but I’ve noticed that if I have /pages/[...slug].js to handle all pages including sub-directory style pages (eg, site.com/about and site.com/locations/new-york), the sub-directory pages only work if .html is appended when deploying to DigitalOcean App Platform.

For example: site.com/about works, but site.com/locations/new-york gives a 404 page. However site.com/locations/new-york.html does work (but isn’t desired behaviour).

It does work correctly locally (site.com/locations/new-york loads) by the way.

If I figure out what’s going on I’ll submit a PR :)

This is cross-posted from this GitHub issue by joneslloyd

Add a comment
By:
kamaln7

Related

Why am I getting a Deploy Error: Health Checks? Question Question
How can I see the build logs for my application if the build was skipped for a deployment? Question Question

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
1 answer
kamaln7 October 30, 2020

It appears that 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,
}

(documentation reference)

I’ve tested this and you can see an example in this repo: https://github.com/kamaln7/nextjs-static-index.html-example

Reply Report
Submit an Answer

Related

Looking for something else?

Ask a new question Search for more help