How to Use Server Action in Client Component in Next.js

In Next.js, you can use server actions inside client components by importing the server action and calling it directly with async/await. Mark the server action with "use server" directive and the client component with "use client" directive to enable this interaction.

Syntax

To use a server action in a client component, define the server action with the "use server" directive. Then, in the client component marked with "use client", import and call the server action asynchronously.

• "use server": Marks a function to run on the server.
• "use client": Marks a component to run on the client.
• Call the server action with await inside an event handler.

javascript

"use server";

export async function myServerAction(data) {
  // server-side logic here
  return `Processed: ${data}`;
}

// In client component file
"use client";

import { myServerAction } from './path/to/serverAction';
import { useState } from 'react';

export default function ClientComponent() {
  const [result, setResult] = useState('');

  async function handleClick() {
    const response = await myServerAction('input data');
    setResult(response);
  }

  return (
    <>
      <button onClick={handleClick}>Run Server Action</button>
      <p>{result}</p>
    </>
  );
}

Example

This example shows a simple server action that returns a greeting message. The client component calls this action on button click and displays the result.

javascript

// serverActions.js
"use server";

export async function greetUser(name) {
  return `Hello, ${name}! This is from the server.`;
}

// ClientComponent.jsx
"use client";

import { useState } from 'react';
import { greetUser } from './serverActions';

export default function ClientComponent() {
  const [message, setMessage] = useState('');

  async function handleGreet() {
    const response = await greetUser('Friend');
    setMessage(response);
  }

  return (
    <main>
      <button onClick={handleGreet}>Greet Me</button>
      <p>{message}</p>
    </main>
  );
}

Output

Button labeled 'Greet Me' is shown. When clicked, the text below changes to: "Hello, Friend! This is from the server."

Common Pitfalls

• Not marking the server action file or function with "use server" causes it to run on the client, leading to errors.
• Forgetting "use client" in the client component file prevents client-side interactivity.
• Calling server actions without await can cause unexpected behavior.
• Trying to use server-only APIs (like database calls) directly in client components without server actions will fail.

javascript

// Wrong: Missing "use server" in server action
export async function badAction() {
  return 'This will not run on server';
}

// Right: Add "use server"
"use server";
export async function goodAction() {
  return 'Runs on server';
}

// Wrong: Client component missing "use client"
import { goodAction } from './actions';
export default function Component() {
  // no "use client" directive
  return null;
}

// Right: Add "use client"
"use client";
import { goodAction } from './actions';
export default function Component() {
  // client logic
  return null;
}

Quick Reference

Concept	Description	Example
"use server"	Marks a function to run on the server	"use server"; export async function action() {}
"use client"	Marks a component to run on the client	"use client"; export default function Component() {}
Calling server action	Call with async/await inside client component event handlers	const result = await action(data);
Importing	Import server actions normally in client components	import { action } from './actions';
Common error	Missing directives or forgetting await causes bugs	Add "use server" and "use client" and use await

Key Takeaways

Mark server actions with "use server" and client components with "use client".

Call server actions asynchronously with await inside client components.

Always import server actions into client components before calling.

Avoid using server-only APIs directly in client components without server actions.

Forgetting directives or await leads to common errors.