Several pages on same url

[simon-lund]

I am quite new to NextJs and have to implement a step-by-step process and would like to display each page of the process, e.g. step1, step2, step3, under the same url "/process".

I found out that this can be done with router = useRouter();router.push(url, as), where url is

• "process/step1",
• "process/step2",
• or "process/step3"

and as is "/process".

However, I wonder if this has any major drawbacks and if there is a better alternative, which is as simple as the use of router.push(...) with aliasing.

Thx in advance.

[rafaelalmeidatk]

The problem with this approach is that as soon as you refresh the page (F5) it will give you a 404 since these pages don't really exist.

Can these steps be individually accessible? In other words, can I directly access process/step2? If yes, then you can use a catch all route like process/[...step].

If you need to access step1 before step2, you can use cookies (for SSR) or local storage to keep track of the visited pages and redirect if necessary, but if this is viable or not will depend on your requirements.

If every time you access any of the steps you need to start again, do you really need this info in the URL? If you do (perhaps for navigating using the browser back/forward buttons) then you might want to consider using hashes: /process#step1, /process#step2. I use this approach with a multi-step form page and it works pretty well

[revskill10]

If you're using hash, what happens if user refresh the page ?

[rafaelalmeidatk]

The hash is preserved but since it is meant to start the form again, I reset it to #step1 as soon as the form mounts. One thing to keep in mind is that hashes are not sent with the server request so you can't get the step in gSSP/gIP, if this is required then you would have to use query strings.

[simon-lund]

Thank you :)

I like the approach with the hashtags.

As as sidenote: To avoid the 404 error on refresh, I guess, you could redirect from /process to /process/step1 (to reset the multi step form) or store the last step with your collected form data and load this page on a refresh (to continue the form).