search

digitalocean / sample-nextjs

⛵ App Platform sample Next.js application.
63 stars 111 forks source link

"Sub directory" pages not working #2

Closed joneslloyd closed 3 years ago

joneslloyd commented 4 years ago

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 :)

kamaln7 commented 3 years ago

:wave: @joneslloyd

Sorry for the late response. 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

Also, please post any questions or issues you run into on the DigitalOcean Q&A. The team closely monitors that and you should get a much quicker response than here 😄 I've cross-posted your question there for visibility: Next.js Static Site Requires .html extension in URL for Dynamic Routes

krispykres commented 2 years ago

G'bless you @kamaln7 your solution was much appreciated!