Next.js Discord

Discord Forum

Central place for client-side configuration

Unanswered
American Sable posted this in #help-forum
Open in Discord
American SableOP
Hi. I just found out that layout.tsx is a server-side component. I'm looking for a central place I can put some client-side configuration. For example I am using axios for making http requests client-side and I want to add some default configuration to it, that should be effective on every client-side component and I don't want to repeat the code.

9 Replies

Britannia Petite
sounds like its a job for react-query
American Crow
Import a provider to Layout
https://vercel.com/guides/react-context-state-management-nextjs#rendering-third-party-context-providers-in-server-components

Also you might want to work with axios interceptors
American SableOP
I don't need interceptors, overwriting the default configuration of axios is enough. I just need a good place where I can put this information, so I don't have to do it in every client-side component. I thought there might be a central place I can put code that is executed in every client-side component
American Crow
Well you basically just create a <Provider> component and wrap the parts of the app ( or entire app ) with it.
Where that Providerfile lives is up to you. You could make a Layout file "use client" just not the RootLayout
Britannia Petite
In your main layout, create a <Providers/> component that wrapp children and make this component use client
@American Crow ahah nice one, 1ms diff
American Crow
haha
great minds think alike Kappa
Britannia Petite
but yes, should defintly have something in the doc on this