I have integrated Sanity.io as a backend for my project, specifically managing the data for my main menu in parent/children object arrays.
While I am able to successfully fetch this data, I prefer to utilize getStaticProps to ensure that my site remains completely statically generated.
Unfortunately, getStaticProps does not work in my layout.js file since it is not located in the "pages" directory. The same goes for the _app.js file.
Therefore, I currently fetch the menu data within each page and pass it as a prop into the Layout component (which now needs to be on every page) so that I can then pass it from the Layout into the header component. Here's how my page structure looks:
function Page({ menu }) {
return (
<Layout menu={menu}>
<article>
...
</article>
</Layout>
)
}
export const getStaticProps = async (context) => {
const menu = await client.fetch(**menu query**);
return {
props: {
menu,
},
};
}
I understand that the Layout component should ideally be placed inside the _app.js file, but unfortunately, this is not possible at the moment.
Despite being aware of the complicated process involved, using getInitialProps within Layout seems to be the only other option, though it would mean resorting to SSR rather than SSG.
After extensive research, the most promising response I found was that incorporating getStaticProps in the layout "will be allowed in the near future." However, this statement was made some time ago...
If anyone can provide guidance or direction on how to handle this issue more efficiently, it would be greatly appreciated. It feels unnecessary to include the layout on every single page solely to pass data into the header component during build time.