Can I add a data attribute to the body in root layout with data fetched in a page?

Discord Q&A frontend-questions
1

I need to style the website’s body tag according to data fetched from Strapi, but it seems impossible to push data up to app/layout.tsx.

Specifically, I have a collection called “Page” which has a relation to the collection called “Section”. A section entry has the field “theme”. Here’s a look at my type definition to give you an idea of the shape of my data:

type Page = {
  title: string
  section: {
    name: string
    theme?: string
  }
}

I just need to get this data in app/[slug]/page.tsx and add the page.section.theme string to the body in app/layout.tsx:

<body data-theme={page.section.theme}>
  {children}
</body>

This topic has been created from a Discord post (1300711418898677772) to give it more visibility.
It will be on Read-Only mode here.
Join the conversation on Discord

2

Learn how to do state management. Things like Jotai together with Immer or other solutions. Then you can set and get state data wherever you need it.