First of all thank you for the release of this product!

I have an app nextjs that I export in static and so I have a folder containing all my pages with the .html extension.

When the site is loaded and I click on a link in the page (next/link) the redirection is done. However, when I refresh the page, I get a 404 because he can’t find the page and expects to get .html at the end of the url.

Is it possible to redirect the url example.com/a to example.com/a.html automatically?

Kind regards

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.

×
Submit an Answer
3 answers

👋🏼 Like @crashoverride said this currently isn’t supported by App Platform however you can configure Next.js to generate the static HTML files in a way that allows you access the routes as /page instead of /page.html.

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

module.exports = {
  trailingSlash: true,
}

This will generate the /page as /page/index.html instead of /page.html.

(documentation reference)

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

  • The “putting the html content in name/index.html” only seems to work when there are no other files in name/. Is there any way around this?

    • Hi @adamvandervorst, I don’t understand how that would be problematic, can you give me an example please?

      The other files in name/ should still be accessible if you reference them directly such as name/image.png. If they are sub-pages, both

      1. name/index.html
      2. name/sub-page/index.html

      should be generated and be accessible at

      1. /name
      2. /name/sub-page
      • Hi @kamaln7, the “direct reference” is the problem.
        Given the file structure is

        root
        |-something.js
        |-name
          |-index.html
          |-app.js
        
        

        In a normal context, app.js would be accessible to index.html, and something.js would not be.
        Here, something.js is accessible, but app.js requires the path from the root.

        So the paths in the page need modification to work with this setup, whereas with “.html rewriting”, it does not.

next/link works in the same way as next/router. You only have more freedom with the last one.
The problem does not come from there but from the resolution of the routes directly.

1) Go to example.com -> Click link example.com/a => works
2) Go to example.com/a directly => does not work because there is no file that resolves this route.
3) Go to example.com/a.html => works

The only solution for the moment is to deploy a webserver and run the next start command.
But in doing so I lose the capability of the cdn? Or create another component that contains the deployment of the output of the next build (_next dir and other files) and have a webserver component that will run next start.

👋 @saikouah

App Platform doesn’t handle this type of routing. It will only do top-level routing. It sounds like you’ll want to use an internal router like next/router to handle routing inside of your app.