How to Fix Cookies can only be modified in a Server Action error

The ‘Cookies can only be modified in a Server Action’ error occurs in Next.js when trying to modify cookies directly in client components or server components that aren’t server actions, which is not allowed in the App Router.

---

How the Error Happens

❌ Error Scenario:

// ❌ This causes the error
// components/ClientComponent.js
'use client';

import { cookies } from 'next/headers';

export default function CookieSetter() {
  const setCookie = () => {
    // ❌ Trying to modify cookies in client component
    cookies().set('theme', 'dark'); // ❌ Error: Can only be modified in Server Action
  };

  return <button onClick={setCookie}>Set Theme</button>;
}

---

✅ Quick Fix - Use Server Actions for Cookie Modification

Solution 1: Create Server Action for Cookie Modification

// ✅ Create server action to modify cookies
// lib/actions.js
'use server';

import { cookies } from 'next/headers';

export async function setThemeCookie(theme) {
  // ✅ Modifying cookies in server action
  cookies().set('theme', theme, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    maxAge: 60 * 60 * 24 * 7, // 1 week
    path: '/',
  });
}

export async function clearThemeCookie() {
  cookies().delete('theme');
}

// ✅ Use server action in client component
// components/ThemeSelector.js
'use client';

import { setThemeCookie } from '../lib/actions';

export default function ThemeSelector() {
  const handleThemeChange = async (theme) => {
    // ✅ Call server action to set cookie
    await setThemeCookie(theme);
    // ✅ Refresh the page or update UI as needed
    window.location.reload();
  };

  return (
    <div>
      <button onClick={() => handleThemeChange('light')}>Light Theme</button>
      <button onClick={() => handleThemeChange('dark')}>Dark Theme</button>
    </div>
  );
}

Solution 2: Use Route Handlers for Cookie Operations

// ✅ In app/api/cookie/route.js
import { NextResponse } from 'next/server';

export async function POST(request) {
  const { name, value } = await request.json();
  
  const response = NextResponse.json({ success: true });
  
  // ✅ Set cookie in route handler
  response.cookies.set(name, value, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    maxAge: 60 * 60 * 24 * 7,
    path: '/',
  });
  
  return response;
}

// ✅ Call the API route from client component
// components/CookieSetter.js
'use client';

export default function CookieSetter() {
  const setCookie = async () => {
    await fetch('/api/cookie', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: 'theme', value: 'dark' }),
    });
  };

  return <button onClick={setCookie}>Set Theme</button>;
}

Solution 3: Read Cookies in Server Components

// ✅ Reading cookies is allowed in server components
// app/page.js
import { cookies } from 'next/headers';

export default function HomePage() {
  // ✅ Reading cookies is OK in server components
  const theme = cookies().get('theme')?.value || 'light';
  
  return (
    <div className={theme === 'dark' ? 'dark' : ''}>
      <h1>Current theme: {theme}</h1>
      {/* ✅ Pass theme to client component */}
      <ThemeSelector currentTheme={theme} />
    </div>
  );
}

Solution 4: Client-Side Cookie Management

// ✅ For client-only cookies, use browser storage
// components/ClientCookieManager.js
'use client';

import { useState, useEffect } from 'react';

export default function ClientCookieManager() {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    // ✅ Read from localStorage instead of cookies
    const savedTheme = localStorage.getItem('theme') || 'light';
    setTheme(savedTheme);
  }, []);

  const updateTheme = (newTheme) => {
    // ✅ Update localStorage instead of cookies
    localStorage.setItem('theme', newTheme);
    setTheme(newTheme);
    
    // ✅ Apply theme to document
    document.documentElement.classList.toggle('dark', newTheme === 'dark');
  };

  return (
    <div>
      <button onClick={() => updateTheme('light')}>Light</button>
      <button onClick={() => updateTheme('dark')}>Dark</button>
    </div>
  );
}