Cookies and headers

Last reviewed May 28, 2026 Content v20260528

Track mode

client_nextjs

Means

In-browser Next.js (client components)

Reading

~1 min

Level

advanced

This lesson

This lesson teaches Cookies and headers: the concepts, APIs, and habits you need before advancing in Next.js.

Without Cookies and headers, you will struggle to read or extend Next.js codebases and playground exercises.

You will apply Cookies and headers in contexts like: Marketing sites, dashboards, e-commerce, and Vercel-style deployments that need hybrid static + dynamic pages.

Write TSX for Client Components, click Run—React 18 CDN + in-browser TSX compile; use client/server lessons explain App Router concepts; mountApp renders interactive UI; printOutput feeds the terminal.

When hooks, state, and effects from intermediate lessons are familiar.

Server Components, Route Handlers, and Server Actions can read and set cookies and headers through async request APIs—powering auth sessions, locale, and caching behavior.

Reading cookies (App Router)

import { cookies } from 'next/headers';

export default async function Page() {
  const session = (await cookies()).get('session');
  return <p>Session: {session?.value ?? 'none'}</p>;
}

Setting cookies in Route Handlers / actions

import { cookies } from 'next/headers';

(await cookies()).set('theme', 'dark', { httpOnly: true, secure: true });

Dynamic rendering trigger

Using cookies() or headers() opts the route into dynamic rendering—Next.js cannot statically prerender personalized output.

Security defaults

httpOnly for session tokens (not readable by JS)
secure in production (HTTPS only)
sameSite to mitigate CSRF

Self-check

Why do cookies force dynamic rendering?
When should a cookie be httpOnly?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

cookies() async why?
redirect after action?

No discussion yet. Be the first to ask a question.