Next.js: Client → Server Cookie Pattern

Quick Start

Two files: Client component ('use client') + Server action ('use server')

// Button.tsx
'use client';
import { setTheme } from './actions';
export default function Button() {
  return <button onClick={() => setTheme('dark')}>Enable Dark Mode</button>;
}

// actions.ts
'use server';
import { cookies } from 'next/headers';
export async function setTheme(theme: string) {
  const cookieStore = await cookies();
  cookieStore.set('theme', theme, { httpOnly: true, maxAge: 60*60*24*365 });
}

Reference Files

• patterns.md - Cookie patterns, form submission, redirect, reading cookies

Notes

• Server-side only: cookies() only works in Server Actions/Components
• Use document.cookie in client components to read
• Last verified: 2025-01-11