nextjs-client-cookie-pattern_skill

Overview

This skill documents a concise pattern for Next.js App Router where client components trigger server actions to set or modify cookies. It explains the two-file approach: a 'use client' component for user interaction and a 'use server' action that performs secure cookie operations. Use it to implement authentication, preferences, session flags, and similar features safely and type-safely.

How this skill works

A client component contains the user-facing handler (onClick or form submission) and imports a server action. The server action runs on the server, calls cookies() from next/headers, and uses cookieStore.set(...) with appropriate options. Client code awaits the server action so the cookie is set before proceeding or redirecting as needed.

When to use it

• When a browser-side event (click, select, form) must set a server-managed cookie
• Implementing login/session creation where httpOnly cookies are required
• Saving user preferences (theme, language) that should persist server-side
• Setting consent or feature flags from client UI
• Replacing an API route with a simpler, type-safe server action

Best practices

• Keep client components minimal: only UI and handlers; delegate cookie logic to server actions
• Use explicit TypeScript types (avoid any) for server action parameters
• Set secure cookie options: httpOnly for sensitive cookies, secure in production, sameSite for CSRF protection
• Await cookies() (Next.js App Router) before calling cookieStore.set
• Prefer server actions over route handlers for tighter integration and less boilerplate
• Read cookies in server components via cookies() and in client components via document.cookie when necessary

Example use cases

• Theme toggle button: client toggles UI state and calls setTheme(theme) server action to persist cookie
• Accept cookies banner: Accept button calls acceptCookies() server action to set consent cookie
• Language selector: client calls setLanguage(lang) to set a non-httpOnly cookie readable by client code
• Login flow: client submits credentials to a server action that sets an httpOnly session cookie and redirects
• Preferences form: HTML form uses a server action as action handler to save preference cookies