Root layout issue

Answered

In&Out posted this in #help-forum

2025-05-10T12:22:32.988Z

'use server'

import { Geist } from "next/font/google";
import "./globals.css";
import Navbar from "./_components/home/utils/Navbar";
import { createClient } from "@/utils/supabase/server";

const defaultUrl = process.env.VERCEL_URL
  ? `https://${process.env.VERCEL_URL}`
  : "http://localhost:3000";

export const metadata = {
  metadataBase: new URL(defaultUrl),
  title: "Next.js and Supabase Starter Kit",
  description: "The fastest way to build apps with Next.js and Supabase",
};

const geistSans = Geist({
  display: "swap",
  subsets: ["latin"],
});

export async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const supabase = await createClient();

  const {
    data: { session },
  } = await supabase.auth.getSession();

  return (
    <html lang="en" className={geistSans.className}>
      <body>
        <Navbar session={session} />
        {children}
      </body>
    </html>
  );
}

Answered by chisto

you should not use

'use server'

directive in layouts, components or pages, it is designed for async functions / server actions

View full answer

10 Replies

In&OutOP

2025-05-10T12:22:43.485Z

Error: A "use server" file can only export async functions, found object.
Read more: https://nextjs.org/docs/messages/invalid-use-server-value
    at ensureServerEntryExports (..\..\..\..\..\src\build\webpack\loaders\next-flight-loader\action-validate.ts:8:12)
    at eval (webpack-internal:///(rsc)/./app/layout.tsx:59:91)
    at <unknown> (rsc)/./app/layout.tsx (C:\Users\kemal\OneDrive\Documents\GitHub\trading_code_cleanup\-0_swiss_project\cms-begin\.next\server\app\page.js:121:1)
    at Function.__webpack_require__ (C:\Users\kemal\OneDrive\Documents\GitHub\trading_code_cleanup\-0_swiss_project\cms-begin\.next\server\webpack-runtime.js:33:43)
   6 |     const action = actions[i]
   7 |     if (typeof action !== 'function') {
>  8 |       throw new Error(
     |            ^
   9 |         `A "use server" file can only export async functions, found ${typeof action}.\nRead more: https://nextjs.org/docs/messages/invalid-use-server-value`
  10 |       )
  11 |     } {
  page: '/'

Why do i get this issue?

The code above is layout.tsx

In&OutOP

2025-05-10T12:32:54.229Z

i have placed "use server" at top just incase as this is what i have inside it

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const supabase = await createClient();

  const {
    data: { session },
  } = await supabase.auth.getSession();

  return (
    <html lang="en" className={geistSans.className}>
      <body>
        <Navbar session={session?.user} />
        {children}
      </body>
    </html>
  );
}