Next.js Discord

Discord Forum

<Head> does not work in client component (Next 14)

Answered
Silver posted this in #help-forum
Open in Discord
SilverOP
Hello, I'm new to NextJS, and I'm facing this issue while making a static page, the Head component is not working...

Here's my layout.tsx:
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  );
}


And my page.tsx (the index page in src/app):
"use client";
import "../app/globals.css";
import Head from "next/head";

const Home = () => {
  return (
    <>
      <Head>
        <title>Home Page Title</title>
        <meta name="description" content="Description of the home page" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Home Page</h1>
      </main>
    </>
  );
};

export default Home;


But for some reason the Head isn't working. Anyone could help me understand why?
Thanks!
Answered by B33fb0n3
the <Head> tag is a tag from the old pages router. You are using the app router. These are two different systems and inside the app router there is no <Head> tag. You can still easily add a title, description, ... [via metadata](https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata). And you favicon will be automatically applied when you put it in the right folder with the correct name[ (see here)](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png).
View full answer

9 Replies

Answer
@Silver The metadata doesn't work when using "use client". Any fix for that?
B33fb0n3
yes you said, that you want to have a static page, so why using use client? Put the use client only where you need interactivity. So in your case:
      <main>
        <h1>Home Page</h1>
      </main>

there is no need for a 'use client' on top. So remove it
SilverOP
Because the code on top is a simplified version, I have many components like carousel gallery, etc, that don't work without "use client"
And I will build the website to a static page that later will be hosted, without any backend
@Silver Because the code on top is a simplified version, I have many components like carousel gallery, etc, that don't work without "use client"
B33fb0n3
ah ok, got it. Create specific components for the specific parts of your app. Then declare only the component that have interactivity as 'use client'. Like that you can set the metadata directly in the page (because then it's SSR). If you dont want to set it inside your page or don't want to write good code, you can also create a layout.tsx and add it there
B33fb0n3
@Silver solved?
SilverOP
Yes
B33fb0n3