Redirect inside nested server action

[PabloGracia]

Hello,

I want to redirect to an external link through a server action, and I have found that if I do it when the function that I'm passing to the form is created in the same file it works, but if I do it from a nested server action that was created in a different file, it fails.

Basically, considering this server action file:

// action.ts
"use server";
import { redirect } from "next/navigation";

export async function redirectToGoogle() {
  redirect("https://google.com");
}

This will work and I'll be redirected to Google:

// page.tsx
import { redirect } from "next/navigation";
import { redirectToGoogle } from "./action";

export default async function Home() {
  async function redirectWrapper() {
    "use server";

    redirect("https://google.com");
    //redirectToGoogle();
  }

  return (
    <div className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1>Welcome!</h1>
      <form action={redirectWrapper}>
        <button type="submit">Redirect me to Google</button>
      </form>
    </div>
  );
}

This will fail, and no redirect will happen:

// page.tsx
import { redirect } from "next/navigation";
import { redirectToGoogle } from "./action";

export default async function Home() {
  async function redirectWrapper() {
    "use server";

    //redirect("https://google.com");
    redirectToGoogle();
  }

  return (
    <div className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1>Welcome!</h1>
      <form action={redirectWrapper}>
        <button type="submit">Redirect me to Google</button>
      </form>
    </div>
  );
}

Does anybody know why? I can work around this by redirecting from the server action defined in the component rather than in the one in the file, but I'm curious what's the reason behind it.

[devjiwonchoi]

When you import the actions.ts from a different file, the component that is importing the actions.ts is considered as a Client Component.

If you're using a Server Action inside a Client Component, create your action in a separate file with the "use server" directive at the top of the file.

In order to resolve this, either declare the corresponding page as Client Component by declaring 'use client' on the top directive or use the first case that you've stated that is working, which is using the use server inside your Server Component.

Use as Client Component

// page.tsx
'use client'

import { redirectToGoogle } from './action'

export default function Home() {
  async function redirectWrapper() {
    redirectToGoogle()
  }

  return (
    <div className='flex min-h-screen flex-col items-center justify-between p-24'>
      <h1>Welcome!</h1>
      <form action={redirectWrapper}>
        <button type='submit'>Redirect me to Google</button>
      </form>
    </div>
  )
}

Use as Server Component

// page.tsx

import { redirect } from "next/navigation";

export default async function Home() {
  async function redirectWrapper() {
    "use server";

    redirect("https://google.com");
  }

  return (
    <div className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1>Welcome!</h1>
      <form action={redirectWrapper}>
        <button type="submit">Redirect me to Google</button>
      </form>
    </div>
  );
}

Reference

• Server Actions with Server Components
• Server Actions with Client Components

[theDanielJLewis]

Sorry, I don't see how this addresses the problem that redirects give errors or don't work when they're used inside an external function instead of within the page component.

[theDanielJLewis]

I might have found the simple solution!

Simply await the function that has the redirect. At least that worked for me (and my function with the redirect had some async code).

So instead of:

// page.tsx
import { redirect } from "next/navigation";
import { redirectToGoogle } from "./action";

export default async function Home() {
  async function redirectWrapper() {
    "use server";

    //redirect("https://google.com");
    redirectToGoogle();
  }

  return (
    <div className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1>Welcome!</h1>
      <form action={redirectWrapper}>
        <button type="submit">Redirect me to Google</button>
      </form>
    </div>
  );
}

Try:

// page.tsx
import { redirect } from "next/navigation";
import { redirectToGoogle } from "./action";

export default async function Home() {
  async function redirectWrapper() {
    "use server";

    //redirect("https://google.com");
    await redirectToGoogle(); // Simply add await
  }

  return (
    <div className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1>Welcome!</h1>
      <form action={redirectWrapper}>
        <button type="submit">Redirect me to Google</button>
      </form>
    </div>
  );
}

[BobbiSixkiller]

For me it did not resolve the problem... Basically I had to copy all of the logic from the nested server action fucntion into the one that is called with the form submission. Even if I awaited the nested server action, i would get next redirect error. Seems like it is not possible to nest server actions with redirects.