CODEWITHSUNDEEP
javascriptreactjsnext.js
codebot
codebot

Reputation: 697

Next.js , pass getServerSideProps and children props in the page component

In my Next project

I have the following structure inside the pages folder

components (folder)
  Layout.js
  Navbar.js
  Footer.js
_app.js
shoes.js
index.js

I have in my _app.js

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  ) 
}

Layout contains some common parts of the app like Navbar.js and Footer.js Inside Layout I have

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> 
    )
}

Layout contains the top and bottom part of the app and then its children go between - in this case the index and shoes pages.

I want to get some data in Layout using getServerSideProps that I will be free to pass around

As is now, inside Layout, I can see only children as props. I dont see posts. I tried different approaches below to insert posts in the Layout component props, nothing worked.

export default function Layout({ children, posts }){ 
export default function Layout({...{ children, posts }}){

How can I resolve this? Please help. Thanks

Upvotes: 1

Views: 13013

Answers (2)

Obed Amoasi
Obed Amoasi

Reputation: 2039

You can use the Layout component as a wrapper only in your pages, then you can pass the props to it.

See how we achieved it here. It might require some changes to your component structure, If you edit your question with your component structure I can help you with it.

so you have to take your Layout component and repeat it in every component under the pages folder.

so in _app, you will have

function MyApp({ Component, pageProps }) {
  return (
      <Component {...pageProps} />
  ) 
}

you will move your static props from where it it now to all the components under pages Your Layout component will become

    export default function Layout({ ... props }){  

    return(
        <ThemeProvider theme={theme}>   
           <Head> </Head>
           <Navbar />  
           <div> {props.posts} </div>
           {props.children}  
           <Footer/>   
        </ThemeProvider> 
    )
}

Now assuming you have a page index.js under pages folder, it will become like this. You will have to do this for all the pages.

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}
    } 
}

Upvotes: 2

vighnesh153
vighnesh153

Reputation: 5388

You can only use getServerSideProps in page components that you have in the pages folder. NextJS will see if there is a getServerSideProps function and if yes, it will invoke it and populate the data. But this only happens if NextJS is in control of the page component. So, even if you store it in the pages directory, but you import the component in some other file, you are basically taking the control away from NextJS and instantiating the component yourself.

Reference

Upvotes: 2

Related Questions