Agent skill · software engineering · wsimmonds
nextjs-client-cookie-pattern
Pattern for client components calling server actions to set cookies in Next.js. Covers the two-file pattern of a client component with user interaction (onClick, form submission) that calls a server action to modify cookies. Use when building features like authentication, preferences, or session management where client-side triggers need to set/modify server-side cookies.
Why this skill is useful
Provides a specific implementation pattern for managing cookies in Next.js that the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2025-10-24. 109 stars on the source repository.
What this skill does
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 File 2: Server Action File Structure TypeScript: NEVER Use any Type This codebase has @typescript-eslint/no-explicit-any enabled. Real-World Examples Example 1: Theme Toggle Example 2: Accept Cookies Banner Example 3: Language Preference Cookie Options Common Variations With Form Submission With Redirect After Setting Cookie Why This Pattern? Can't client components set cookies directly? No. Client components run in the browser, and modern browsers restrict cookie manipulation for security. Server actions run on the server where cookie-setting is allowed. Why not use a Route Handler (API route)? You can! But server actions are simpler and more integrated with the Next.js App Router pattern. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills wsimmonds/nextjs-client-cookie-pattern