Search code examples
reactjstypescriptnext.jsnext.js13app-router

Title is not displayed inside head tag in Next.js 13.4 application

I'm building an application using Next.js 13.4. I've added title and description inside metadata but it is not getting displayed in the browser.

"use client";
import Navbar from "@/components/Navbar";
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { ThemeProvider } from "next-themes";
import Footer from "@/components/Footer";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "My title",
  description: "My description",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className="scroll-smooth">
      <body className={inter.className}>
        <ThemeProvider enableSystem={true} attribute="class">
          <Navbar />
          {children}
          <Footer />
        </ThemeProvider>
      </body>
    </html>
  );
}

enter image description here

My understanding is that if I add title and description in metadata it will will be displayed in the browser. Am I msising something? how to fix this?

Solution

  • You can't export metadata in a client component, in App directory architecture.

    The root layout is a Server Component by default and can not be set to a Client Component.

    This is what Nextjs said in there documentation, visit documentation.

    Remove use client and check it again, the problem may got solved.