Next.js Discord

Discord Forum

routing on server action

Unanswered
Southeastern blueberry bee posted this in #help-forum
Open in Discord
Southeastern blueberry beeOP
hi, from a server action i want to redirect into a specific page and also include an object that going to be sent into the page how i can do that ? i've seen userouter but he can be used only inside client component and redirect can't include data. Thank you

27 Replies

@Southeastern blueberry bee hi, from a server action i want to redirect into a specific page and also include an object that going to be sent into the page how i can do that ? i've seen userouter but he can be used only inside client component and redirect can't include data. Thank you
aardani
few choices
1. return the data in server action and handle redirection in client component
2. embed the data as the searchParam of url when using redirect()
3. save teh data in cookie first before redirect()-ing
Southeastern blueberry beeOP
I think im going to use the cookies method thank you! also i didn't understand the first option can you please enlighten me
you can do this 
const result = await serverAction()
just check the result of result and do stuff conditionally in the client
if(A) then router.push("somewhere")
Southeastern blueberry beeOP
like this ? `'use client' import { getCoiffeur } from "@/app/actions"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { useRouter } from 'next/navigation'; const SearchForm = (): JSX.Element => { const result = await getCoiffeur(); return ( <form action={getCoiffeur} className="w-96 z-20 pr-8 flex flex-col gap-4"> <Input type="text" placeholder="Prestation, nom du coiffeur..." className="bg-transparent backdrop-blur-lg placeholder:text-white/75 text-white" /> <Input type="text" placeholder="Adresse, ville" className="bg-transparent backdrop-blur-lg placeholder:text-white/75 text-white" /> <Button variant="outline">Chercher</Button> </form> ) }
aardani
its slightly different
coz you can't retrieve value returned in action={getCoiffeur}
so you have to use onSubmit()
and get all the data of the input first with react
export default function MyForm() {
  function handleSubmit(e) {
    // Prevent the browser from reloading the page
    e.preventDefault();

    // Read the form data
    const form = e.target;
    const formData = new FormData(form);

    // You can pass formData as server action:
    const res = await serverAction(formData);
    
    // Do something else based on ress

  }

  return (
    <form method="post" onSubmit={handleSubmit}>
      <label>
        Text input: <input name="myInput" defaultValue="Some initial value" />
      </label>
      <hr />
      <label>
        Checkbox: <input type="checkbox" name="myCheckbox" defaultChecked={true} />
      </label>
      <hr />
      <p>
        Radio buttons:
        <label><input type="radio" name="myRadio" value="option1" /> Option 1</label>
        <label><input type="radio" name="myRadio" value="option2" defaultChecked={true} /> Option 2</label>
        <label><input type="radio" name="myRadio" value="option3" /> Option 3</label>
      </p>
      <hr />
      <button type="reset">Reset form</button>
      <button type="submit">Submit form</button>
    </form>
  );
}
https://react.dev/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form Source, slightly modified for Server Action
Southeastern blueberry beeOP
Oookay and i guess that the <form action={serveraction} > method should be a better choice only when the client component doesnt need the result right or I'm completely off the mark ?
aardani
not completely
Southeastern blueberry beeOP
in which case it should be efficient to use it ?
aardani
wait
like 99% completely
coz like maybe in the future theres a wrapper to receive the return value of action={}
you can return a value from a server action but if you put it in action={} you wont be able to read them
but with useFormState you can get the returned value here https://react.dev/reference/react-dom/hooks/useFormState#using-information-returned-by-a-form-action
Southeastern blueberry beeOP
ok thank uu
Southeastern blueberry beeOP
i found this on react doc https://react.dev/reference/react-dom/components/form `export default function Search() { function search(formData) { const query = formData.get("query"); alert(You searched for '${query}'); } return ( <form action={search}> <input name="query" /> <button type="submit">Search</button> </form> ); } is action a generic name ? because in the example they can handle the function they passed to action inside the client component
aardani
That looked like client action to me
and it was only announced recently
you can try if you want and let us know if it works