0

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?

1 Answers1

1

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.

Al-Qa'qa'
  • 166
  • 2
  • Thank you @Al-Qa'qa'. I used ThemeProvider, which requires a component rendered as a client component. I found a workaround for this. It was an oversight on my part. I appreciate your help. – Steevel sharon Salis Aug 17 '23 at 11:59