Tengo un componente de contexto de autenticación donde estoy ajustando el componente principal de mi aplicación, pero al mismo tiempo también estoy tratando de hacer un componente de diseño específico de página según la documentación de Next.js aquí: https://nextjs.org/docs/basic -características/diseños#diseños-por-página

¿Estoy haciendo esto correctamente, porque parece que no puedo obtener los datos de mi proveedor de contexto?

/contexto/AuthContext.js

 const UserContext = createContext({}); export default function AuthContext({children}) { // .. code return ( <UserContext.Provider value={{ user, setUser }}> {children} </UserContext.Provider> ); } export const useUser = () => useContext(UserContext);

/_app.js

 function MyApp({ Component, pageProps }) { const getLayout = Component.getLayout || ((page) => page); return getLayout( <div> <AuthContext> <Component {...pageProps} /> </AuthContext> </div> ); } export default MyApp;

/componentes/Proyecto/Lista.js

 import { useUser } from "../../context/AuthContext"; const ProjectList = () => { const { user } = useUser(); console.log("get user data", user); return ( <> test </> ); }; export default ProjectList;

Estoy tratando de consolar el registro del usuario, pero me da indefinido. ¿Creo que es por la forma en que está envuelto como un componente de diseño? Podría estar haciendo esto mal. Pero inicié sesión en la consola dentro de mi AuthContext para el usuario, y la información allí es correcta.

/páginas/proyectos/index.js

 const Projects = () => { // code goes here return ( <div> code goes here </div> ) } export default Projects; Projects.getLayout = function getLayout(page) { return <ProjectLayout>{page}</ProjectLayout>; };

Cuando elimino el bloque de código Projects.getLayout , los datos vuelven, pero cuando agrego este código, los datos desaparecen.

/components/Proyecto/Layout.js

 const ProjectLayout = ({children}) => { return ( <> <ProjectList /> {children} </> } export default ProjectLayout