Pressing Back on my result page dropped users into onboarding. How do you handle history in wizards?
I have a multi-step onboarding wizard in Next.js that ends on a generated result page. All my checks passed. Then I finished the flow by hand, pressed the browser Back button on the result page, and landed in onboarding again, not on the main screen a finished user should return to.
The cause was one word. Each navigation in the wizard used router.push, which adds a new entry to the browser’s history. So the whole wizard stayed in the history stack, and Back walked straight into it. It happened in three places in one component.
The fix: router. replace instead of router.push at those three places. replace overwrites the current history entry instead of adding one, so finished steps don’t pile up behind the result page. I kept router.refresh() so the server data still reloads. I merged it and confirmed it by pressing Back on a real finished flow.
Why I missed it: unit tests check what a screen renders and what a function returns. History is browser state, and no test of mine pressed Back. I found it by hand.
The tradeoff I’m unsure about: with replace, a user can’t press Back to fix an earlier answer. That’s right for the final redirect, but I’m not sure it’s right for every step in the middle.
Do you use replace for every redirect after a submit, or only the last one? And how do you test browser history behavior: Playwright, a manual checklist, or something else?
Replies
Be the first to reply
Have a question or a thought to share? Add a comment above to start the conversation.