You can basically do multi step forms in two ways:

1. All in one route with one state managing which step is shown
2. Every step has it's own route (multi step multi route)

Both approaches are valid.
(2) might has the advantage that you can share specific steps or restore specific steps easier.
Big forms might also benefit from this approach. However its a bit more complicated of a setup.

Both approaches make use of useContext nothing wrong with that.
If you feel like your solution is not good maybe your API is bad?

As consumer you generally want to end up with something like

<FormWrapper
  heading=""
  >
  {/* Add Form Fields (...register) */}
   <div> Info Page </div>
   <input
      className="text-gray-900"
      {...register("test")}
   />
  <FormActions>
   <button
      type="button"
      onClick={() => router.push("/success")}
   >
      Next
   </button>
  </FormActions>
</FormWrapper>

This of course internally leverages context and providers which is a good way to do it

Okay, thank you so much for your quick reply.

I am currently using step 1, and I feel like I want to work to step 2 as it feels a bit more cleaner and more professional I think.

And currently the onboarding form isn't big, but we have a lot of extra's coming in the future so I want to have it more future proof, you know.

Okay thank you, good to know that useContext is nothing wrong with. My API is simple and pretty clear, I don't think it's bad, but I could definitely improve it in the near future.

Your example looks almost exactly the same like what I currently have, so I might stick with what I have and just change or clean it up a bit, the only thing I don't have right now is that (multi step, multi router) idea you're talking about, that I really like.

Do you might have any documentation to where I can read myself in to that (multi step, multi router) router.push() or would you say it's better to search for these terms and learn form there?

A list to look into:
– form fields use in input component (...register);
– router.push('/page');

Thank you a lot.

Best regards.

Not really docs, however I just created a repo. Someone in another thread #Best approach for multi step form? had the same question and asked for one, lol.
So i figured i'd create one.
It's just a quick proof of concept:
https://github.com/capsloq/next14-multistep-multiroute-poc

This is so wild, haha, thank you so much! You made my whole week. I will go through this for tonight also to understand what I am looking at instead of blatantly copying, but this is incredible. Thanks!