Next.js Discord

Discord Forum

For some reason my navbar is serverside

Unanswered
Banana posted this in #help-forum
Open in Discord
BananaOP
Whenever i put my navbar in my layout.tsx, it is serverside even though its using "use client", and then if i put it in a page, its both? As it console.log() stuff in my terminal and console, does anyone know why?

Navbar: https://sourceb.in/L90ExOTBU7

4 Replies

BananaOP
Layout.tsx:
import type { Metadata } from "next";
import { Outfit } from "next/font/google";
import "./globals.css";
import Navbar from "@/components/Navbar";

const outfit = Outfit({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="min-h-screen overflow-x-hidden">
      <body className={`${outfit.className} w-full h-full min-h-screen max-w-7xl mx-auto text-white`} style={{ overflow: "visible" }}>
        <Navbar />
        {children}
      </body>
    </html>
  );
}
BananaOP
And then when i build it, it works properly :/
BananaOP
Ah alright
But the thing is, its not just components, its also my pages