Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Nextjs: How to dynamically set the <header> content based on the component loaded

I created a app/components/Header.js component.

export function Header() {
    return <>
    <header className="w-full h-14 grid grid-cols-12 bg-gray-50 text-black dark:bg-gray-900 dark:text-white">
        <div className="left self-center col-span-3">
            <div className="logo text-black dark:text-white ml-6 text-xl">
                <a href="#">Logo</a>
            </div>
        </div>
        <div className="center self-center col-span-6 text-center">
            <p>{ set dynamic title here}</p>
        </div>
        <div className="right self-center col-span-3 text-right mr-6">
            <div className="CTA">
                <a className="" href="#">CTA</a>
            </div>
        </div>
    </header>
    </>
}

This is app/layout.js

import { Roboto } from "next/font/google";
import { Header } from "./components/Header";
import { Footer } from "./components/Footer";

import './globals.css'

const roboto = Roboto({subsets: ["latin"], weight: ["400", "700"]})

export const metadata = {
  title: {
    default: "Index",
    template: "%s | Sitename"
  },
  description: 'Abcdef.',
}


export default function RootLayout({children}) {
  return (
    <html lang="en">
      <body className={roboto.className}>
        <Header/>
        {children}
        <Footer/>
      </body>
    </html>
  )
}

This is app/samad/page.js

export const metadata = {
    title: "Samad"
}

export default function Samad(){
    return <>
        <h1>Hello, THis is samad</h1>    
    </>
}

Whenever I open http://localhost:3000/samad, the title content in <header> should change to "samad".

I searched every where, it’s little bit confusing.

I trieid using useState() and import RootLayout to page.js but cause error, because we can’t use useState() in server-components. if I make it client-component then I can’t use metadata.

I also use document.title but error: document not found.

Note: document title (tab title) is changing. I want to update content in <Header>

Tags:

2

Answers


  1. 0

    I think you need the Header component in all child components instead of RootLayout and add a title property to the Header component:

    export function Header({title}) {
    return <>
    <header className="w-full h-14 grid grid-cols-12 bg-gray-50 text-black dark:bg-gray-900 dark:text-white">
        <div className="left self-center col-span-3">
            <div className="logo text-black dark:text-white ml-6 text-xl">
                <a href="#">Logo</a>
            </div>
        </div>
        <div className="center self-center col-span-6 text-center">
            <p>{title}</p>
        </div>
        <div className="right self-center col-span-3 text-right mr-6">
            <div className="CTA">
                <a className="" href="#">CTA</a>
            </div>
        </div>
    </header>
    </>
}

    import { Header } from "./components/Header";

export const metadata = {
    title: "Samad"
}

export default function Samad(){
    return <>
        <Header title={"Samad"} />
        <h1>Hello, THis is samad</h1>    
    </>
}
    Login or Signup to reply.
  2. 0

    add this to the same page’s layout.js. that’s where the next/layout works for.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search