Next.js Discord

Discord Forum

Best way to deal with Next.js 14 server action with react-hot-toast

Unanswered
Spectacled Caiman posted this in #help-forum
Open in Discord
Spectacled CaimanOP
Hi, When trying to deal with next.js 14 and react-hot-toast together I have facing issues. Not able to create a user friendly toast. Is there anyone who have the experience with next js 14 latest & know how to deal with react-hot-toast?

7 Replies

B33fb0n3
You can build in the whole form stuff with server actions and then wait for the response from the server action. After you got the response, you can show the user a toast depending on your response
Spectacled CaimanOP
I have used useFormState for getting the response from server action but when I am getting the data in my "use client" side the state is not working properly . Is there any other way I can get response from server action?
Spectacled CaimanOP
Codes
B33fb0n3
wow... well yea... first you need to build the whole form process right. So your form actions should look like this:
    const [state, formAction] = useFormState((prevState, formData) => addToMailList(prevState, formData, dict), {});
// or without the dict directly the function

<form id={"signUpForm"} action={formAction} className={"w-full flex flex-col gap-y-4"}>
// only include the nearly defined formAction

    useEffect(() => {
        if (state.success)
            router.push(window.location.href + "?" + createQueryString("finished", true), {scroll: false});
        else
            setError(state.message)
    }, [state]);
// check if the state changes (handle the response)

In your case in your last step you don't redirect the user. In your case you show them a toast
Spectacled CaimanOP
okay, Thank You . it's helpful
B33fb0n3
great to hear that I could help
Please mark solution
Spectacled CaimanOP
okay