Hey everyone!

I've been stuck on this multistep form for a while now, and I don't really know how I could proceed.
Im using react-hook-form, and zod.
I have 2 solutions. Both have their pros and cons, but I think I could somehow have the best of both worlds.

Router Based
I have a layout.tsx file, that contains a price summary, and the children which are the individual pages. All this wrapped in a custom context provider

Each page uses useForm<SchemaType> ( ... ) and has its own Next and Previous buttons.
Each page's Next button first validates the form, then saves it to the provided BookingState, like:
const { updateBookingData, bookingData} = useBookingContext() const handleNext = (data: z.infer<typeof PageSchema>) => { ... updateBookingData(data) router.push("...") }

Pros
- Using the back and forward buttons, keeps the form state
- The very first step (personal data) can be very easily skipped, if the user is logged in, by just using a middleware.
- More maintainable

Cons
- Lots of repeated code
- Routes can be visited by directly going to the specific url
- I personally feel like, its a bit stupid to have a useState to hold all of the form data especially while using react hook form


Conditionally rendered
This is basically a page.tsx with a currentStep state variable, rendering the correct component based on this state.

Here, all of the form navigation, (Next and Previous) is defined in this page.tsx
This method takes the currentStep.fields array, that tells zod which fields to validate.
Also has a kind of messy useEffect that checks if the user is logged in, and forces the current step to skip the Peronal Data component.

Pros
- Much DRYer
- No middleware needed
- No need to keep form state separately from react-hook-form

Cons
- Complex validation logic
- Has to define a fields array to know what to validate for
- useEffect
- More complex logic for Price Summary
- Less maintainable