nextjs-client-cookie-pattern

Set cookies from Next.js client components via server actions.

Updated Dec 17, 2025

Search Tags:#authentication #nextjs #cookies #cookie #client-component #server-action

Ready to run

npx skills add https://github.com/mcclowes/vague-playground --skill nextjs-client-cookie-pattern

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-client-cookie-pattern
Source: https://github.com/mcclowes/vague-playground/tree/main/.claude/skills/nextjs-client-cookie-pattern
Command: npx skills add https://github.com/mcclowes/vague-playground --skill nextjs-client-cookie-pattern

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This pattern shows how to set cookies from the client by calling a server action, enabling interactive features like authentication and preferences.

Core Features & Use Cases

Client component triggers server actions
Server actions modify cookies securely
Real-world examples: theme toggle, accept cookies banner, language preference

Quick Start

Create a client component with 'use client' that calls a server action to set a cookie on click, e.g., a ThemeToggle button calling setTheme on the server.

Frequently Asked Questions about nextjs-client-cookie-pattern

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set cookies from a client component in Next.js?▼

Set cookies from a client component by calling a server action that uses next/headers cookies() to set them with httpOnly, secure, and sameSite options. A 'use client' component triggers a 'use server' action, which handles cookie creation securely on the server.

Can I use server actions to handle authentication cookies in Next.js?▼

Yes, server actions are ideal for authentication cookies. Use a 'use client' component to capture login or logout events, then call a 'use server' action that sets httpOnly, secure cookies with appropriate maxAge values for session management.

What's the pattern for toggling user preferences like theme or language with cookies?▼

Create a 'use client' component with a button or form that calls a 'use server' action to set preference cookies. The server action uses next/headers cookies() to persist the choice with sameSite and secure flags, enabling theme or language toggles.

Do I need to handle cookie validation when using server actions in Next.js?▼

Yes, validate typed inputs in your server action before setting cookies. Define input types for cookie values, then use next/headers cookies() with proper httpOnly, secure (in production), sameSite, and maxAge options to enforce security boundaries.

Why use server actions instead of API routes for setting cookies?▼

Server actions in Next.js provide a direct client-to-server pattern without separate endpoint management. They integrate cookies() from next/headers natively and handle httpOnly and secure flags by default, simplifying cookie-based authentication and preferences.

Can I set multiple cookies with different expiration times using this pattern?▼

Yes, a single server action can call next/headers cookies() multiple times with different maxAge values. Structure your 'use server' function to accept typed inputs for each cookie, then set them all with appropriate expiration times in production-secure mode.