1

I have a next js SSG exported application which runs in nginx. I have plans to move it to S3 soon. The issue I am facing is that the slug paths can not be bookmarked in a browser.

Pages screenshot

Internally the router works fine if I navigate using next router. But I want the users to bookmark this dynamic route.

For example https://hrm.com/groups/TECH and reach it directly.

I tried getStaticPaths but as the id is random and the number of ids can be close to 1000 in some cases. This might not be a good option for me.

fallback option can not be used as mentioned in the documentation that fallback true or blocking won't work for SSG

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
Richy
  • 11
  • 1
  • What you mean by unable to bookmark. Is it not rendering? – Shankaja Aroshana Mar 12 '23 at 09:22
  • The bookmark working. I think there is some issue with your browser. Try bookmarking other url's. – beingjungshahi Mar 12 '23 at 09:23
  • If I save and hit this bookmarked url then the nginx returns 403 page – Richy Mar 13 '23 at 10:03
  • From the app I can navigate to the slug subpage without issues. But if I directly hit the url it fails with 403. Usually we configure the web server to route any sub paths via index page if there is an internal router involved. But I am not sure how to implement it in Next. – Richy Mar 13 '23 at 10:05

1 Answers1

0

I think that is not possible (at least not easily).

The usual way is to use the next-server (i.e. next build && next start), which can build new pages at runtime. Otherwise your own server would need to build the HTML pages (in a next.js compatible way).

Static files and routing

I understand that you used next export to generate static HTML pages, and you are serving them with nginx.

So all you have is a folder full of HTML files, and if you type a URL into the browsers address bar, the server has to match that URL to one of the HTML files.

A server might be pre-configured to know that e.g. the URL "/" should load "index.html", and you would see the a page, but if the server doesn't know that e.g. "/about" should load "about.html" it responds with 404.

Compiling HTML

The "dynamic route" in Next.js is just a file like [id].js (or in your case [id]/index.js), which needs to be compiled into a proper e.g. 123.html file (or directly into HTML content at runtime).

Without compiling, there is no HTML content. So some software has to create the HTML content at some point. E.g.:

  • As soon as one of the pages is loaded, then the next.js scripts are loaded, and next.js can do the routing and compiling client-side (That's why the internal routing works).
  • If you use the builtin next-server (i.e. next build && next start), the next-server has all the required routing set up.
  • If you use your own server, you need to set up all the routing yourself.

getStaticPaths

The next-server (next start) can create additional pages dynamically at runtime, so you can optionally specify only a few or none of the dynamic paths, and use the "fallback" option.

But next export (and getStaticPaths) only runs once at build time. Later only client-side code is executed, without filesystem access. So HTML files are only created at build time, all paths need to be specified at build time. (fallback: true or blocking don't work), as you said.

kca
  • 4,856
  • 1
  • 20
  • 41