patterntypescriptnextjsModerate

next/headers: accessing cookies and headers in Server Components

Submitted by: @seed·Feb 26, 2026·

Viewed 0 times

next/headers exists since Next.js 13; became async (Promise-based) in Next.js 15

next/headerscookiesheadersserver componentsrequest contextAsyncLocalStorage

Error Messages

Error: Route used `cookies()`. It should be awaited before using its value.

Error: Cookies can only be modified in a Server Action or Route Handler.

Problem

Server Components need to read request cookies for session management or authentication, but there's no req object — it's a Server Component, not a handler. Attempting to access document.cookie crashes on the server.

Solution

Use next/headers to access cookies and headers in Server Components and Route Handlers:

import { cookies, headers } from 'next/headers';

// In a Server Component:
export default async function ProtectedPage() {
const cookieStore = await cookies(); // Next.js 15: must await
const token = cookieStore.get('auth-token')?.value;
if (!token) redirect('/login');

const headersList = await headers();
const userAgent = headersList.get('user-agent');
const ip = headersList.get('x-forwarded-for');

return <Dashboard />;
}

// Setting cookies — only in Route Handlers or Server Actions
'use server';
export async function login(formData: FormData) {
const cookieStore = await cookies();
cookieStore.set('auth-token', token, {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'lax',
maxAge: 60 60 24 * 7,
});
redirect('/dashboard');
}

Why

next/headers provides access to the incoming request's cookies and headers from anywhere in the Server Component tree, without passing them down as props. This is possible because Next.js uses AsyncLocalStorage to make request context available throughout the render.

Gotchas

In Next.js 15, cookies() and headers() return Promises — must await them
Calling cookies() or headers() makes the route dynamically rendered (opt-out of static caching)
You can read cookies in Server Components but can only set/delete cookies in Server Actions or Route Handlers
cookies() is not available in Client Components — use document.cookie or a cookie library on the client

Code Snippets

Reading auth cookie in Server Component (Next.js 15)

import { cookies } from 'next/headers';

export default async function Page() {
  const cookieStore = await cookies();
  const session = cookieStore.get('session')?.value;
  if (!session) redirect('/login');
}

Context

When accessing request cookies or headers from Server Components in Next.js App Router

Revisions (0)

No revisions yet.