Next.js Discord

Discord Forum

metaData error

Unanswered
Harlex posted this in #help-forum
Open in Discord
HarlexOP
I get an error when I use ‘use client’ in a component with metaData, how can I fix this problem

"use client"

import type { Metadata } from "next";
import "../globals.css";
import Header from "../components/layout/Header/Header";
import Footer from "../components/layout/Footer/Footer";
import Sidebar from "../components/layout/Sidebar/Sidebar";
import ClientProvider from "../components/layout/ClientProvider";
import db from "../lib/dbConnect";
db();
import { ThemeProvider } from "../contexts/ThemeContext";
import { useState } from "react";

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

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const [sidebarOpen, setSidebarOpen] = useState<boolean>(true);

  const handleSidebarToggle = (isOpen: boolean) => {
    setSidebarOpen(isOpen);
  };

  return (
    <html lang="en">
      <body>
        <ClientProvider>
          <ThemeProvider>
            <Sidebar onToggleSidebar={handleSidebarToggle} />
            <Header />
            <main
              className={`${
                sidebarOpen ? "pl-[270px]" : "pl-[220px]"
              } bg-white text-black transition-all duration-300`}
            >
              <div className="container flex flex-col min-h-screen">
                <div className="mb-5 mt-[90px] grow">{children}</div>
                <Footer />
              </div>
            </main>
          </ThemeProvider>
        </ClientProvider>
      </body>
    </html>
  );
}

2 Replies

Sloth bear
Remove use client at the top
cougarb8
yeah but then he won't be able to use useState in his layout.tsx file, the solution is to make a client component and import it into your layout.

This client component should extract the client side logic only to be in the client file and then you'll be able to import it here. So you'll most likely need a top level client component that has your header, sidebar and footer as children of that component