Estoy desarrollando un formulario de contacto y quiero desarrollarlo como la siguiente página. https://ubie.app/

Entonces, creé _app.js como página principal y step1.js, step2.js como páginas secundarias.

 - _app.js...Parent page - contact +- step1.js...Child page1(Store current state to parent page) +- step2.js...Child page2(Get current parent state)

¿Podría decirme cómo puedo mostrar el estado principal en la página secundaria 2? no se como puedo conseguirlo Vi la siguiente página y entendí cómo configurar el estado, pero no estoy seguro de cómo obtener el estado del padre. ¿Cómo puedo pasar datos en formularios de varios pasos en NextJS?

_app.js

 import '../styles/globals.css' import { useState } from "react" const AppComponent = ({ Component, pageProps }) => { const [formData, setFormData] = useState({}); const updateFormData = (newData) => { setFormData({ ...formData, ...newData }); }; return <Component {...pageProps} updateFormData={updateFormData} formData={formData} />; }; export default AppComponent;

paso1.js

 import { useRouter } from "next/router"; function Step1({ updateFormData }) { const router = useRouter() const handleNameChange = (event) => { updateFormData({ name: event.target.value }); }; const handleSurNameChange = (event) => { updateFormData({ surname: event.target.value }); }; return ( <div> <p> Name: <input name="name" onChange={handleNameChange} /> </p> <p> SurName: <input name="surname" onChange={handleSurNameChange} /> </p> <button type="button" onClick={() => router.push("step2")}> Next </button> </div> ); } export default Step1;

paso2.js

 function Step2({formData}) { return ( <> <p> {formData} </p> </> ); } export default Step2;