Next.js Discord

Discord Forum

Rootlayout creates empty page when using "use client" in component

Unanswered
Crazy ant posted this in #help-forum
Open in Discord
Crazy antOP
Hey All

I want to use my sidenav component which will be using "use client" in the root layout.tsx
I've tried wrapping it into a wrapper like I saw on the docs but I get the following error:

Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". So basically an empty page
Could somebody point me in the right direction? Because for me this sidenav is not a provider directly, why should it handle the children prop ? Im definitely missing some theory here or a simple concept from the docs, this component should be in the root, since the nav stays the same for all the other routes.

// @/components/sidenav.tsx
"use client"

import { SideNavItemsType } from "@/config/sidenav";
import React from 'react';
import { Button } from "./ui/button";

export interface SideNavProps {
  items: SideNavItemsType;
}

export const SideNav: React.FC<SideNavProps> = ({ items }) => {
  return (
    <div className="pb-12">
      {items.map((item) => (
        <div key={item.title} className="space-y-4 py-4">
          <div className="px-3 py-2">
            <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
              {item.title}
            </h2>
            <div className="space-y-1">
              {item.subItems.map((subItem) => (
                <Button key={subItem.subTitle} variant="ghost" className="w-full justify-start">
                  <subItem.icon className="mr-2 h-4 w-4" />
                  {subItem.subTitle}
                </Button>
              ))}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}


// "@/components/providers/sidenav-provider"
"use client"

import { SideNav, SideNavProps } from "../sidenav"

export function SideNavProvider({ children, ...props }: SideNavProps) {
    return <SideNav {...props}>{children}</SideNav>
}


// app/layout.tsx
import { SideNav } from '@/components/sidenav'
import { SiteFooter } from '@/components/site-footer'
import { ThemeProvider } from "@/components/providers/theme-provider"
import { SideNavProvider } from "@/components/providers/sidenav-provider"
import { sideNavItems } from "@/config/sidenav"
import { Inter } from 'next/font/google'
import './globals.css'

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

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          <div className="flex min-h-screen">
            <div className="w-64 border-r p-4">
              <!-- This one here "use client" -->
              <SideNavProvider items={sideNavItems} />
            </div>
            <div className="flex flex-col flex-grow">
              <main className="m-4 flex-grow">{children}</main>
              <SiteFooter />
            </div>
          </div>
          
        </ThemeProvider>
      </body>
    </html>
  )
}

0 Replies