Nextjs Client Cookie Pattern

This is the two-file pattern you need whenever a button or form on the client needs to set a cookie in Next.js. Client components can't touch cookies directly, so you split it: one file with 'use client' for the onClick handler, another with 'use server' for the actual cookie-setting logic. The skill walks through the complete setup with real examples like theme toggles, cookie consent banners, and language selectors. It also covers when to use httpOnly versus readable cookies, form submissions, and post-cookie redirects. If you've ever wondered why your client component can't just set a session cookie, this explains the security constraint and gives you the cleanest workaround.

skills.sh installs: 325
GitHub stars: 110
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wsimmonds/claude-nextjs-skills --skill nextjs-client-cookie-pattern --agent claude-code

Installs into .claude/skills of the current project.

Files

Next.js: Client Component + Server Action Cookie Pattern

Pattern Overview

This pattern handles a common Next.js requirement: client-side interaction (button click) that needs to set server-side cookies.

Why Two Files?

Client components ('use client') can have onClick handlers
Only server code can set cookies (security requirement)
Solution: Client component calls a server action that sets cookies

The Pattern

Scenario: A button that sets a cookie when clicked

File 1: Client Component (app/CookieButton.tsx)

Has 'use client' directive
Has onClick handler
Imports and calls server action

File 2: Server Action (app/actions.ts)

Has 'use server' directive
Uses cookies() from next/headers
Sets the cookie

Complete Implementation

File 1: Client Component

// app/CookieButton.tsx
'use client';

import { setPreference } from './actions';

export default function CookieButton() {
  const handleClick = async () => {
    await setPreference('dark-mode', 'true');
  };

  return (
    <button onClick={handleClick}>
      Enable Dark Mode
    </button>
  );
}