Next 15 migration: next/navigation "redirect" method does not execute from server action

[justin-algoleaf]

Link to the code that reproduces this issue

https://github.com/justin-algoleaf/redirect-test

To Reproduce

1. npm run dev
2. Click "Redirect" button on "/" page

Current vs. Expected behavior

Current Behavior
Form submission runs server action which should execute redirect('/dashboard'). I get a 303 for the redirect, but the redirect is not performed in the browser. Server action completes and nothing happens.

Expected Behavior
Form submission runs server action which executes successful redirect to '/dashboard'

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 16075
  Available CPU cores: 8
Binaries:
  Node: 22.11.0
  npm: 10.8.3
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.0.3 // Latest available version is detected (15.0.3).
  eslint-config-next: N/A
  react: 19.0.0-rc-66855b96-20241106
  react-dom: 19.0.0-rc-66855b96-20241106
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Navigation

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

This is the exact project structure and route grouping I used in all of my Next 14 builds. I have the (auth) group and page, which should redirect users via server action to the /dashboard page with successful login. After migrating to Next 15 along with next/form Form and useActionState, redirect does not properly execute. The minimal recreation repo I provided should demonstrate the issue clearly.

Thanks for your help!

[kevinpruett-prime]

Experiencing the same issue. As a workaround, I'm returning a success flag from the server action and performing the redirect on the client:

form.tsx

"use client";

import { useActionState, useEffect } from "react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useRouter } from "next/navigation";

import { testServerAction } from "./actions";

export default function Form() {
  //   Nextjs
  const router = useRouter();

  //   Server action
  const [state, formAction, pending] = useActionState<
    { error: string; success: boolean },
    FormData
  >(testServerAction, { error: "", success: false });

  //   Effects
  useEffect(() => {
    if (state.success) {
      console.log("success, trigger redirect");
      router.push("/dashboard");
    }
  }, [router, state.success]);

  return (
    <form action={formAction}>
      <Input type="text" name="phone_number" placeholder="Phone Number" />
      <Button>{pending ? "..." : "Submit"}</Button>
    </form>
  );
}

actions.ts

export async function testServerAction(state: ActionState, payload: FormData) {
  // redirect not working in server action, instead
  // returning a success flag that is handled in the client component
  return { error: "", success: true };
}

[justin-algoleaf]

Thanks for sharing. I considered the same client-side workaround but ended up returning a redirect from my express server instead. I'd still like to see the Next redirect method work properly.

[justin-algoleaf]

Thanks!