En mi próximo proyecto
Tengo la siguiente estructura dentro de la carpeta de páginas.
components (folder) Layout.js Navbar.js Footer.js _app.js shoes.js index.js tengo en mi _app.js
function MyApp({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> ) } El diseño contiene algunas partes comunes de la aplicación, como Navbar.js y Footer.js Diseño interno que tengo
export async function getServerSideProps(){ const req = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=3`) const posts = await req.json(); return { props:{posts} } } export default function Layout({ ... props }){ return( <ThemeProvider theme={theme}> <Head> </Head> <Navbar /> <div> {props.posts} </div> {props.children} <Footer/> </ThemeProvider> ) }El diseño contiene la parte superior e inferior de la aplicación y luego sus elementos secundarios van en medio, en este caso, el índice y las páginas de zapatos.
Quiero obtener algunos datos en Layout usando getServerSideProps que podré pasar libremente
Tal como está ahora, dentro de Layout, solo puedo ver niños como accesorios. no veo las publicaciones Probé diferentes enfoques a continuación para insertar publicaciones en los accesorios del componente Diseño, nada funcionó.
export default function Layout({ children, posts }){ export default function Layout({...{ children, posts }}){¿Cómo puedo resolver esto? Por favor ayuda. Gracias
Solo puede usar getServerSideProps en los componentes de página que tiene en la carpeta de páginas. NextJS verá si hay una función getServerSideProps y, en caso afirmativo, la invocará y completará los datos. Pero esto solo sucede si NextJS tiene el control del componente de la página. Entonces, incluso si lo almacena en el directorio de pages , pero importa el componente en algún otro archivo, básicamente le está quitando el control a NextJS e instanciando el componente usted mismo.
Puede usar el componente Diseño como un envoltorio solo en sus páginas, luego puede pasarle los accesorios.
Vea cómo lo logramos aquí . Es posible que requiera algunos cambios en la estructura de su componente. Si edita su pregunta con la estructura de su componente, puedo ayudarlo.
por lo que debe tomar su componente Layout y repetirlo en cada componente en la carpeta de páginas.
entonces en _app , tendrás
function MyApp({ Component, pageProps }) { return ( <Component {...pageProps} /> ) } moverá sus accesorios estáticos desde donde están ahora a todos los componentes debajo de las pages Su componente de diseño se convertirá en
export default function Layout({ ... props }){ return( <ThemeProvider theme={theme}> <Head> </Head> <Navbar /> <div> {props.posts} </div> {props.children} <Footer/> </ThemeProvider> ) } Ahora, suponiendo que tiene una página index.js en la carpeta de páginas, se volverá así. Tendrás que hacer esto para todas las páginas.
function Index({posts,..props}) { return ( <Layout posts={posts}> // your current home content will be here </Layout> ) } export async function getServerSideProps(){ const req = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=3`) const posts = await req.json(); return { props:{posts} } }