Next.js: Client Component + Server Action Cookie Pattern

Pattern Overview

This pattern handles a common Next.js requirement: client-side interaction (button click) that needs to set server-side cookies.

Why Two Files?

• Client components ('use client') can have onClick handlers
• Only server code can set cookies (security requirement)
• Solution: Client component calls a server action that sets cookies

The Pattern

Scenario: A button that sets a cookie when clicked

File 1: Client Component (app/CookieButton.tsx)

• Has 'use client' directive
• Has onClick handler
• Imports and calls server action