Next js 14 - prop drilling

[mighty glade]

I have a simple question.

I'm using "app folder" in my Next js 14 project.

In the layout.tsx file (can also be page.tsx) I get data from the server side API and pass it to the child components using props. This gets annoying when there are many nested children components. In addition, I also need to type the data that I pass using props.

Yes, I know, if I make the same request on the server components, Next js does not send a new request, it pulls it from the cache. However, I can't do this because my children components are on the client side. How do you cope in such situations?

Thank you in advance.

[serene gate]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[granite carbon]

If your children are client components, use a context wrapper

Fetch data in your layout and send it to a client component which takes the data and children as props, then setup a context in the client wrapper and call that from your other children

[granite carbon]

@mighty glade

[mighty glade]

Thank very much. All data appears in the "page source" and I can access it in all client components. This is very easy.
Well, let's assume that I have 100 pages and they all consist of nested components in the same way. Is it appropriate to do this application for all pages? So let me wrap all the pages (page.tsx) in the Provider (ProductsContext, ProjectsContext, UserContext, etc...) like this

[serene gate]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1223616728668569602 message)

[granite carbon]

@mighty glade I know you marked the solution but I wanted to warn you about your final statement

It's a bad idea to wrap your whole app in a bunch of providers, remember it's a footgun, you need to limit the amount of things your wrapper wraps and the amount of data in the wrapper, it's bad for performance.