#Share dynamic data across application

1 messages · Page 1 of 1 (latest)

barren silo
#

Hi Nextjs-gang :)

I am working on a engineering-blog which fetches article data from a CMS. Each article has a color associated with it, and I would like to use this color to set the color on various elements across my site. My question is how I can access/pass this color value from a dynamic route that fetches a given article to my header and footer components. I have my <Header /> and <Footer /> in the root layout.tsx, and articles are fetched inside a dynamic route.

I am on Nextjs ^15, and using app router by the way.

I've asked some GPTs, and they recommend creating a ColorContext that I wrap my app in - but this entails making my entire app client side I think? That doesn't sound too appealing, so that's why I'm here to ask if there are any other options I could go for. Could Zustand work? Set the color value in Localstorage/as a cookie and read the value that way? Could I create a separate layout.tsx inside the dynamic route that renders alternative versions of the <Header> and <Footer> that can read the slug and fetch the article and set the color that way?

Thanks for all input :)

atomic widgetBOT
#
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)