Form POST Redirect

Answered

Willow Flycatcher posted this in #help-forum

Willow FlycatcherOP

2023-10-07T03:09:44.000Z

In my code I'm using a html form where it makes a post request to a api endpoint and in the api endpoint I use redirect to redirect back to the homepage. Even though the api route completes it hangs on the redirect and stays loading.

Answered by riský

View full answer

21 Replies

Willow FlycatcherOP

2023-10-07T03:10:06.000Z

<form method="POST" action={'/api/post'} className="border-2 border-black w-min mx-auto p-2 gap-2 flex">
{inputs}
</form>

export async function POST(req: Request) {
    //Some code that registers data that runs

    redirect('/')
}

riský

2023-10-07T03:14:05.000Z

try returning the redirect

@Willow Flycatcher ts export async function POST(req: Request) { //Some code that registers data that runs redirect('/') }

joulev

2023-10-07T03:32:08.000Z

Disclaimer: this is just an educated guess

I think the reason it doesnâ€™t work is because the redirect here is a POST redirect so you are posting to / which doesn't work

To do this I think you have to use server actions here, or don't use action and just use normal onSubmit+fetch+router.push

With server actions it is very simple to do what you are trying to do here. But it is in alpha hence experimental

@joulev Disclaimer: this is just an educated guess I think the reason it doesnâ€™t work is because the redirect here is a POST redirect so you are posting to / which doesn't work To do this I think you have to use server actions here, or don't use action and just use normal onSubmit+fetch+router.push

riský

2023-10-07T03:41:29.000Z

it uses 307... so i am very now very interested to see what occures... like if it still stayes with POST or converts to GET...

joulev

2023-10-07T03:46:20.000Z

As far as I know the method is preserved

And that is a pretty confident guess because people asked this before here

riský

2023-10-07T03:46:41.000Z

but your 2 solutions are way better anyway