---

name: nextjs-client-cookie-pattern

IMPORTANT: Keep description on ONE line for Claude Code compatibility

prettier-ignore

description: Client component onClick/form → Server Action → set cookie. 'use client' calls 'use server' action using cookies() from next/headers. allowed-tools: Read, Write, Edit, Glob, Grep, Bash

Next.js: Client → Server Cookie Pattern

Quick Start

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

Copy// 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