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