Functions cannot be passed directly to Client Components

Question

Does anyone know why this component errors with

[ Server ] Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

I thought this was SSR by default?

KycForm.tsx

import Form from 'next/form'
import { Input } from "@/components/ui/input";

export default function KycForm() {
    function doSomething(formData){
        const query = formData.get("query");
        alert(`You searched for '${query}'`);
    }
    
    return (
        <Form action={doSomething} replace={true}>
            <Input name="query" />
            <button type="submit">Submit</button>
        </Form>
    )
}

chisto · Accepted Answer

your server action needs "use server" directive  function doSomething(formData){ "use server"        const query = formData.get("query");        alert(You searched for '${query}');

Functions cannot be passed directly to Client Components

2 Replies