Need help to approach Layout issue
So i've got a Layout wrapper component for my (almost fully) static app - Problem is, this Layout requires certain Static Data, product categories.
The way I do it now is every page calls my
<Layout categories={categories}/> component with the categories props which are statically fetched on every page's getStaticProps - Is there a good way for me to be able to wrap this Layout component across all pages in _app while still having access to the categories data?19 Replies
For context:
What I have now -
What I want
So, I'm not sure I understood it correctly, but that kinda reminds me of how I've implemented my MainLayout component and a custom title prop:
This way my pages all have access to this prop:
@ me if you think that's kind of what you need and I can elaborate on the implementation
Hey yea that's what I need. Could you elaborate how to implement this?
Sure, I added the prop I wanted to the next.d.ts, to get the types right
And then I use getServerSideProps to add a translated title
And the wrapper is just like I showed before, just another component
Then I get the
pageProps out of the props and wrap with the Layout
I don't think you'll need this, but I'm just showing just in case
Won't this force you to use serverSideProps in every page tho?
Or can it be done with staticprops too
It doesn't because I can just have a default
But in my application, I kinda want the translation for every page anyways
so I'm obligated to use ssp either way
Hm. My usecase really requires me to use staticProps for this
As it's quite a lot of data that changes very infrequently
Hm.. yeah I don't really know how that would work for static prop, maybe it's still the same? 🤔
I'll try it in a bit
the way I see it, your props are just another part of the pageProps, no?
So you could essentially just pass
categories down from App to your Wrapper, then access it from your component
And the whole thing I showed there is kinda useless for youBut I can't SSG the categories in App
It's not just some JSON data, it requires me to query my database.
@deforestor It works with SSG as well. Thank you!
This solution works great
A bit unsafe typesafety wise, as you can forget to pass those props through your page, but ye
Yeah, I was trying to figure a better way to type it as well
I'm glad it worked!
Ye thank you! Exactly what I was looking for