yano
yano

Reputation: 1

Next.js serverAction passing data to the action

I got stuck with the serverAction in Next.js 14 with app router. I want to pass directly some information from my server-side page to the server-side action. Or at least I want to find a way to access data in the action, that was previously fetched or "calulated" in the server-side page.tsx.

My structure: Let's say I have a dynamic 'page', <somePage> with a page.tsx (server side), a somePageClient.tsx with the client side and an action.ts - server side.

    <somePage>
    |- page.tsx
    |- somePageClient.tsx
    |- action.ts

The page.tsx fetches data and returns the somePageClient component

    export default async function SomePage({ searchParams }: { searchParams: { id: string, otherParam: string, anotherParam: string } }) {
    let { id, otherParam, anotherParam } = searchParams;
    ...
    // fetchData here
    data = ...;
    
    return <somePageClient data={data} abc={anotherParam} />

My somePageClient would look something like this:

    'use client';
    ...
    import { sendValues } from "@/app/somePage/actions";
    
    interface SomePageClientProps {
    data: {
    ...
    } 
    abc: string
    }
    
    export default function SomePageClient({data, abc}: SomePageClientProps){
    ...
    const [state, formAction] = useFormState(sendValues, initialState);
    ...
    
    return (
    <>
    <Form action={formAction} >
              <label>Name</label>
              <input type={data.type} name={data.name} />
    </Form>
    </>
    );
    
    }

Now my action.ts holds the formAction function

    export async function sendValues(
        prevState: {
          message: string;
        },
        formData: FormData,
      ) {
    
        console.log(`Value ${formData.get("This is the big quesstion")} `);
    
    ...
    }

My problem is, that the page is dynamic, which means in the action, I don't know the name of the formAction properties which I want to get from the formData.

I already tried to at least get the searchParams via the request but this doesn't work in the action. It seems to me that neither the request header nor anything else I could use is accessible here.

So the big question is: How can I get values from the page.tsx in my action.ts? Sorry for the question, maybe it's easy, maybe it's ... but I got really stuck here.

Upvotes: 0

Views: 353

Answers (0)

Related Questions