Reading page property in layout.tsx. | Next.js | Page 1

mortal temple Sep 17, 2023, 4:03 PM

#

Hello, so I have this page

const Page = () => {
  return <>Test</>;
};

Page.theme = "green";

export default Page;

I want to be able to read this property "theme" of this page in my layout.tsx so I can pass it to ThemeProvider component. I could do this before with using _app.tsx's Component but now with the removal of that I am nto sure if i can do that.

Here's my layout.tsx:

async function RootLayout({ children }: any) {
  return (
    <html suppressHydrationWarning={true} lang="en" className="scroll-smooth">
      <body suppressHydrationWarning={true} className={inter.className}>
        <ThemeProvider>
          <RainbowProvider>
            <header className="supports-backdrop-blur:bg-background/60 bg-menu container sticky top-0 z-40 m-0 w-full border-b p-0 text-[17px] backdrop-blur lg:mx-auto">
              <DesktopNav />
              <MobileNav />
            </header>
            <main className="container m-0 p-0 lg:mx-auto">{children}</main>
            <footer className="container m-0 p-0 lg:mx-auto">
              <Separator className="my-8" />
              <div className="flex justify-between p-4 md:p-8 lg:px-[62px]">
                <div>© 2023 BN Technology</div>
                <div>
                  <Link href="/privacy-policy">Privacy Policy</Link>
                </div>
                <div>
                  <Link href="/terms-and-conditions">Terms and conditions</Link>
                </div>
                <div className="flex">
                  <Twitter className="mx-4" />
                  <Instagram className="mx-4" />
                  <Youtube className="mx-4" />
                  <Linkedin className="mx-4" />
                </div>
              </div>
            </footer>
            <Toaster />
          </RainbowProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

export default RootLayout;

meager archBOT Sep 17, 2023, 4:03 PM

#

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)

mortal temple Sep 17, 2023, 4:27 PM

#

I found this - https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts

But its also talking about _app.js which as far as i know has been deprecated in next.js 13?

Routing: Pages and Layouts

Create your first page and shared layout with the Pages Router.

dusty sedge Sep 17, 2023, 4:33 PM

#

are you using pages dir or app dir?

#

in next.js 13 you can use both, but preferable only using one is more maintainable

mortal temple Sep 17, 2023, 4:34 PM

#

i use app dir

dusty sedge Sep 17, 2023, 4:35 PM

#

i dont think you can do that anymore in app dir

mortal temple Sep 17, 2023, 4:35 PM

#

😭

#

is there any other way I can pass value to a provider in the layout

#

from the page component

dusty sedge Sep 17, 2023, 4:36 PM

#

yeah

#

use a setter

#

call the setTheme hook from a child client component

mortal temple Sep 17, 2023, 4:36 PM

#

and I can read it in the layout.tsx ?

dusty sedge Sep 17, 2023, 4:37 PM

#

it will be read in the <ThemeProvider> during hydration from client

#

yes

mortal temple Sep 17, 2023, 4:37 PM

#

oh wow

#

ok, will try. thanks

#

#

#

like that?

dusty sedge Sep 17, 2023, 4:38 PM

#

no

#

the setter needs to come from the <ThemeProvider>

#

Theme Provider is a context provider that you can use in the child component

#

a context provider usually provides a setter() function and the theme value

#

there should be a hook that lets you consume the theme context provider already

mortal temple Sep 17, 2023, 4:41 PM

#

TIL, ok

dusty sedge Sep 17, 2023, 4:42 PM

#

mortal temple

you only do this if you want to decide the initial theme from the server, which is usually not what you want to do

#

or else it will flash/shutter

mortal temple Sep 17, 2023, 4:42 PM

#

i want to have a specific page

#

that has a green theme

#

and the other ones should have completely different theme

#

whatever the user wants to have

dusty sedge Sep 17, 2023, 4:43 PM

#

try setting the theme on a useEffect then

#

check the docs, there should be a way to set the theme programmatically

mortal temple Sep 17, 2023, 4:43 PM

#

there is one way but when i set it in one page

#

it changes everywhere

dusty sedge Sep 17, 2023, 4:43 PM

#

oh

#

isn't there a way to just override the theme for a specific page

mortal temple Sep 17, 2023, 4:44 PM

#

and the docs use _app.tsx

dusty sedge Sep 17, 2023, 4:44 PM

#

what ui lib is it

mortal temple Sep 17, 2023, 4:44 PM

#

#

https://www.npmjs.com/package/next-themes

npm

next-themes

An abstraction for themes in your Next.js app.. Latest version: 0.2.1, last published: a year ago. Start using next-themes in your project by running npm i next-themes. There are 188 other projects in the npm registry using next-themes.

#

its this one

dusty sedge Sep 17, 2023, 4:45 PM

#

can't you just wrap another <ThemeProvider> on that specific page? and set it to green

mortal temple Sep 17, 2023, 4:46 PM

#

feels like its gonna break everything but gonna give it a try

#

😄

#

#

like that, right?

dusty sedge Sep 17, 2023, 4:48 PM

#

yeah

#

#

should be possible

#

TIL too aha

mortal temple Sep 17, 2023, 4:49 PM

#

never lucky

#

😭

dusty sedge Sep 17, 2023, 4:49 PM

#

wym

mortal temple Sep 17, 2023, 4:49 PM

#

#

still white

#

oh wait

dusty sedge Sep 17, 2023, 4:50 PM

#

ah

#

ahhh

#

i get it now

#

try creating something like this, im gonna send you a pseudocode

export function ThemeProviderOverrider({ children }) {
  const path = usePathname()
  
  return(
    <ThemeProvider forceTheme={path === '/specificroute' ? 'green' : undefined}>
      {children}
    </ThemeProvider>
  )
}

#

does that make mroe sense

mortal temple Sep 17, 2023, 4:52 PM

#

holy moly

#

ye

#

god help me if there's more pages with specific themes 😄

dusty sedge Sep 17, 2023, 4:53 PM

#

since in Pages dir, everything is a client component so sharing component attributes like Page.theme is possible. However, in RSC/app dir, server comps and client comps are interleaved and such, those context can be lost iirc

#

I haven't experimented much on this pattern

#

especially if Page is passed into the props of { children } and you can't extract attributes from { chidlren }, atleast without some hacky ways

mortal temple Sep 17, 2023, 4:54 PM

#

ye exactly

#

you cant get attributes from children

#

i will use the pseudocode pattern you sent me

#

thank you

dusty sedge Sep 17, 2023, 4:54 PM

#

lmk if it works

mortal temple Sep 17, 2023, 4:54 PM

#

will do

mortal temple Sep 17, 2023, 11:51 PM

#

worked out just fine

#

i don't like that it uses the usePathname hook, would like it more if i could somehow attach it to the page somehow but i think it's gonna work for now

#

will think of a new solution if this doesnt work anymore lol

#

thank you a looooot, i really appreciate your help and time ❤️

#

if i could help you somehow. rate you somethink, star something whatever you want just @ me 🙂

dusty sedge Sep 18, 2023, 12:27 AM

#

mortal temple if i could help you somehow. rate you somethink, star something whatever you wan...

Can always hangout in #off-topic

dusty sedge Sep 18, 2023, 12:28 AM

#

mortal temple i don't like that it uses the usePathname hook, would like it more if i could so...

Its hard coz conceptually, due to partial rendering. Layouts are persistent while sub child may change or rerendered on server

dusty sedge Sep 18, 2023, 12:28 AM

#

mortal temple will think of a new solution if this doesnt work anymore lol

Should not change for a while, its the app router way after all

mortal temple Sep 18, 2023, 12:29 AM

#

🤞 that we wont have to add new feature that require a forced theme based on something else

#

ye i should read more about the way it renders stuff

#

all i know is server rendering is like in the old days with php rendering everything serverside

#

and clientside is "hell yeah, brother use that client's RAM"

dusty sedge Sep 18, 2023, 12:39 AM

#

Im also still exploring how to switch themes

#Reading page property in layout.tsx.