Next.js Discord

Discord Forum

[Next.js 13] How to pass data from page to layout

Answered
Siamese posted this in #help-forum
Open in Discord
SiameseOP
page.tsx
export default function Home() {
  const pageName = 'Home'
  
  return (
    <>
      <div className="relative flex place-items-center">
        <Image
          src="/rabbit.png"
          alt="Rabbit"
          width={214}
          height={300}
        />
      </div>
    </>
  )
}


layout.tsx
export default function RootLayout({
  children
}: {
  children: React.ReactNode,
}) {
  return (
    <html>{pageName}</html>
  )
}
Answered by joulev
the layout does not rerender when you navigate between pages under it, so you have to put that metadata logic inside the page itself
View full answer

6 Replies

it depends on your use case, you have to implement it differently depending on what you try to do
SiameseOP
each page has its metadata and i might want to use them in the layout
joulev
the layout does not rerender when you navigate between pages under it, so you have to put that metadata logic inside the page itself
Answer
SiameseOP
i see, thanks for the explanation!!