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

In my Next project

I have the following structure inside the pages folder

ponents (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 mon parts of the app like Navbar.js and Footer.js Inside Layout I have

export async function getServerSideProps(){   
    const req = await fetch(``) 
    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 ponent props, nothing worked.

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

How can I resolve this? Please help. Thanks

In my Next project

I have the following structure inside the pages folder

ponents (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 mon 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./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 ponent props, nothing worked.

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

How can I resolve this? Please help. Thanks

Share Improve this question edited Feb 2, 2022 at 10:40 asked Feb 1, 2022 at 10:40 codebot 71710 gold badges33 silver badges62 bronze badges

1 You have two options: 1) fetch the data server-side in _app inside getInitialProps then pass it down to the Layout ponent; 2) fetch the data on the client (useEffect) in the Layout ponent itself. – juliomalves Commented Feb 2, 2022 at 11:40

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

You can only use getServerSideProps in page ponents 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 ponent. So, even if you store it in the pages directory, but you import the ponent in some other file, you are basically taking the control away from NextJS and instantiating the ponent yourself.

Reference

You can use the Layout ponent 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 ponent structure, If you edit your question with your ponent structure I can help you with it.

so you have to take your Layout ponent and repeat it in every ponent 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 ponents under pages Your Layout ponent will bee

    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 bee 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./posts?_limit=3`) 
    const posts = await req.json();
    return {
        props:{posts}
    } 
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Next.js , pass getServerSideProps and children props in the page component - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)