Fix Error: Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". in Next.js

This error occurs when a server function is passed as a prop to a client component without the 'use server' directive. In the App Router, functions crossing the server-client boundary must be explicitly marked as server actions. Fix it by adding 'use server' to the function or the file containing it.

Reading the Stack Trace

Here's what each line means:

• at ServerPage (/app/src/app/dashboard/page.tsx:14:5): The server component at line 14 passes a function prop to a client component without marking it as a server action.
• at renderModelDestructive (/app/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:924:14): React Server Components serializer encounters a function and cannot serialize it across the server-client boundary.
• at renderElement (/app/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:798:12): The RSC renderer is processing the element tree when it detects the non-serializable function prop.

Common Causes

// app/dashboard/page.tsx (Server Component)
import DeleteButton from './DeleteButton';

export default async function Page() {
  async function deleteItem(id: string) {
    await db.item.delete({ where: { id } });
  }
  return <DeleteButton onDelete={deleteItem} />;
}

// lib/actions.ts (no 'use server' directive)
export async function deleteItem(id: string) {
  await db.item.delete({ where: { id } });
}

// components/DeleteButton.tsx
'use client';
import { deleteItem } from '@/lib/actions';
export function DeleteButton() {
  return <button onClick={() => deleteItem('1')}>Delete</button>;
}

export default async function Page() {
  async function handleSubmit(formData: FormData) {
    await db.post.create({ data: { title: formData.get('title') } });
  }
  return <form action={handleSubmit}><input name="title" /><button>Submit</button></form>;
}

The Fix

Move the server function to a separate file with the 'use server' directive at the top. This tells Next.js the function is a server action that can be serialized as a reference and safely passed to client components.

// app/dashboard/page.tsx (Server Component)
import DeleteButton from './DeleteButton';

export default async function Page() {
  async function deleteItem(id: string) {
    await db.item.delete({ where: { id } });
  }
  return <DeleteButton onDelete={deleteItem} />;
}

// app/dashboard/page.tsx (Server Component)
import DeleteButton from './DeleteButton';
import { deleteItem } from '@/app/actions';

export default async function Page() {
  return <DeleteButton onDelete={deleteItem} />;
}

// app/actions.ts
'use server';

export async function deleteItem(id: string) {
  await db.item.delete({ where: { id } });
}

Testing the Fix

import { render, screen, fireEvent } from '@testing-library/react';
import DeleteButton from '@/app/dashboard/DeleteButton';

describe('DeleteButton', () => {
  it('calls onDelete when clicked', async () => {
    const onDelete = jest.fn();
    render(<DeleteButton onDelete={onDelete} />);
    fireEvent.click(screen.getByRole('button', { name: /delete/i }));
    expect(onDelete).toHaveBeenCalled();
  });

  it('renders the delete button', () => {
    render(<DeleteButton onDelete={jest.fn()} />);
    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/server-action-use-server-directive,git add src/app/actions.ts src/app/dashboard/page.tsx src/app/dashboard/__tests__/DeleteButton.test.tsx,git commit -m "fix: add 'use server' directive to server action functions",git push origin fix/server-action-use-server-directive

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run build

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

npm install bugstack-sdk

import { initBugStack } from 'bugstack-sdk'

initBugStack({ apiKey: process.env.BUGSTACK_API_KEY })

Deploying the Fix (Manual Path)

1. Create a separate actions file with the 'use server' directive.
2. Run the test suite locally to verify server actions work.
3. Open a pull request with the refactored server actions.
4. Wait for CI checks to pass on the PR.
5. Merge to main and verify the actions execute correctly in staging.

Frequently Asked Questions