nextjs-client-cookie-pattern

Client components cannot set cookies directly. Use a two-file pattern: a client component with 'use client' calls a server action with 'use server' that uses next/headers cookies() to set httpOnly, secure cookies. This pattern enables client-triggered events like button clicks to persist authentication, preferences, or session data server-side.

Yes. Client components call server actions that handle cookie modification. The server action receives the cookie key and value, applies strict TypeScript typing, and sets cookie options (httpOnly, secure, sameSite, maxAge) via next/headers cookies(). This separates client interaction from secure server-side state management.

Use the two-file pattern to set persistent cookies from client events. A client component triggers a server action when the user selects a preference, the server action sets a typed, secure cookie with appropriate options, and the preference persists across sessions without exposing cookie logic to the client.

Yes. Strict TypeScript typings are required for this pattern: define explicit key and value types for cookies, and specify well-defined cookie options (httpOnly, secure, sameSite, maxAge). This ensures type safety when the server action receives client-side inputs and sets cookies via next/headers.

The pattern separates concerns: the client component ('use client') handles user interaction, while the server action ('use server') exclusively manages cookie operations with next/headers cookies(). This prevents client-side cookie manipulation, enforces httpOnly and secure flags, and centralizes authentication and session logic server-side.

Common use cases include cookie consent banners that set preference cookies, theme toggles persisting user design choices, language selectors storing locale preferences, and authentication flows where client events trigger server-side session cookie updates for security and persistence.