hoping a Next.js magician could help me with this, or at least just tell me flat out if it isn’t possible.
We have a site which is compiled down into static files. These will be served from S3.
When I run next export, everything builds correctly, but I had hoped to be able to directly access subpages without adding the .html extension. I assumed (wrongly) that next built pages into directories, and dropped an index.html into that directory.
The setup on the dev side is fairly simple. Each component has a directory, eg "some-component", with an index.js which exports the named component from an adjacent file like "some-component.js".
This all works if I start at the site root – I can navigate to, eg, /components/some-component without worrying about the extension.
Next has created a some-component directory, but the file inside that is still just called some-component.html. So if I hit that url from the browser, it obviously 404s.
Is there any way to get next to spit out index.html’s into the directories, so browsing directly to the directory (try saying that after a drink) works? Or am I barking up the wrong tree?
I know there are other solutions to this, particularly for s3, but figured it was worth asking about.
Cheers!
>Solution :
Next.js has a trailingSlash setting that should work for you:
// next.config.js
module.exports = {
trailingSlash: true,
}
When this setting is true, and using something like ./pages/products/shoes.jsx as an example, a directory named after the .jsx file (shoes) is created and that .jsx file then becomes an index.html file inside that directory, i.e., href="/products/shoes/". Your server will send that path’s index.html (or can be configured to if it doesn’t already) even when index.html isn’t specified in the href.