nextjs-client-cookie-pattern

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.

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.

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.

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.

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.

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.