Theo's Typesafe Cult•2y ago

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

Xaohs•2y ago

For context: What I have now -

//index.tsx
    <Layout categories={categories}>
        <Home />
      </Layout>

//index.tsx
    <Layout categories={categories}>
        <Home />
      </Layout>

What I want

//_app.tsx
<Layout categories={categories}>
<Component {...pageProps} />
</Layout>

//_app.tsx
<Layout categories={categories}>
<Component {...pageProps} />
</Layout>

deforestor•2y ago

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:

deforestor•2y ago

This way my pages all have access to this prop:

deforestor•2y ago

@ me if you think that's kind of what you need and I can elaborate on the implementation

Xaohs•2y ago

Hey yea that's what I need. Could you elaborate how to implement this?

deforestor•2y ago

Sure, I added the prop I wanted to the next.d.ts, to get the types right

deforestor•2y ago

And then I use getServerSideProps to add a translated title

deforestor•2y ago

And the wrapper is just like I showed before, just another component

deforestor•2y ago

Then I get the pageProps out of the props and wrap with the Layout

deforestor•2y ago

I don't think you'll need this, but I'm just showing just in case

Xaohs•2y ago

Won't this force you to use serverSideProps in every page tho? Or can it be done with staticprops too

deforestor•2y ago

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

Xaohs•2y ago

Hm. My usecase really requires me to use staticProps for this As it's quite a lot of data that changes very infrequently

deforestor•2y ago

Hm.. yeah I don't really know how that would work for static prop, maybe it's still the same? 🤔

Xaohs•2y ago

I'll try it in a bit

Gaming

Programming

Need help to approach Layout issue