nextjs-client-cookie-pattern

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

5|Updated Dec 22, 2025

Search Tags:#nextjs #server-actions #cookies #client #cookie-pattern

One-click install

npx skills add https://github.com/MuhammedSuhaib/LevelUpSpeckit-Plus --skill nextjs-client-cookie-pattern-muhammedsuhaib

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: nextjs-client-cookie-pattern
Source: https://github.com/MuhammedSuhaib/LevelUpSpeckit-Plus/tree/main/Skill+SubAgents/skills/claude-nextjs-skills/nextjs-client-cookie-pattern
Command: npx skills add https://github.com/MuhammedSuhaib/LevelUpSpeckit-Plus --skill nextjs-client-cookie-pattern-muhammedsuhaib

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This pattern demonstrates how a client component can trigger a server action to set cookies, ensuring cookies are managed securely on the server side while enabling client-side interactivity.

Core Features & Use Cases

Two-file pattern: Client component + server action for cookie management.
Secure cookies: Server-side control of cookies with proper attributes.
Real-world examples: Theme toggles, cookies banners, and language preferences.

Quick Start

Create a client component with 'use client' and an onClick handler.
Implement a server action using next/headers' cookies() to set the cookie.
Call the server action from the client component.