Next.js Discord

Discord Forum

Redirect giving error

Unanswered
Black-throated Sparrow posted this in #help-forum
Open in Discord
Black-throated SparrowOP
Encountering issues when trying to use redirect from next/navigation as an onClick method for one of my buttons. The component file is as follows:
"use client";

import { redirect } from "next/navigation";
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";

const SignOutButton = () => {
  const supabase = createClientComponentClient();

  return (
    <div className="control">
      <button
        className="button is-light"
        onClick={async () => {
          await supabase.auth.signOut();
          redirect("/");
        }}
      >
        Sign Out
      </button>
    </div>
  );
};

export default SignOutButton;

It gives an unhandled runtime error with the reference NEXT_REDIRECT. Looking at the documentation it looks like this is the expected behaviour of the function(?) but it's not working for some reason.

Alternatively, I considered using router.push("/" and although that works, the issue is that it doesn't force a re-render. This is paramount as the sign out function updates the session variable which is used by my Navbar to render data dynamically.

Can anyone figure out why redirect is giving me this error or give me a way of forcing a re-render without using the useEffect or useState hooks? Not that I have anything against them, I just feel like there's probably a much easier solution to this that doesn't involve them.

As always, thank you all in advance!

5 Replies

Black-throated SparrowOP
This is the best workaround I've found at the moment
"use client";

import { useRouter } from "next/navigation";
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";

const SignOutButton = () => {
  const router = useRouter();
  const supabase = createClientComponentClient();

  return (
    <div className="control">
      <button
        className="button is-light"
        onClick={async () => {
          await supabase.auth.signOut();
          router.push("/");
          router.refresh();
        }}
      >
        Sign Out
      </button>
    </div>
  );
};

export default SignOutButton;
@Black-throated Sparrow Encountering issues when trying to use redirect from `next/navigation` as an onClick method for one of my buttons. The component file is as follows: "use client"; import { redirect } from "next/navigation"; import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"; const SignOutButton = () => { const supabase = createClientComponentClient(); return ( <div className="control"> <button className="button is-light" onClick={async () => { await supabase.auth.signOut(); redirect("/"); }} > Sign Out </button> </div> ); }; export default SignOutButton; It gives an unhandled runtime error with the reference `NEXT_REDIRECT`. Looking at the documentation it looks like this is the expected behaviour of the function(?) but it's not working for some reason. Alternatively, I considered using `router.push("/"` and although that works, the issue is that it doesn't force a re-render. This is paramount as the sign out function updates the session variable which is used by my Navbar to render data dynamically. Can anyone figure out why redirect is giving me this error or give me a way of forcing a re-render without using the `useEffect` or `useState` hooks? Not that I have anything against them, I just feel like there's probably a much easier solution to this that doesn't involve them. As always, thank you all in advance!
ncls.
redirect is actually supposed to throw an error to stop the code execution and which Next.js will then handle.
Also mentioned in the docs: https://nextjs.org/docs/app/api-reference/functions/redirect#example
@ncls. `redirect` is actually supposed to throw an error to stop the code execution and which Next.js will then handle. Also mentioned in the docs: https://nextjs.org/docs/app/api-reference/functions/redirect#example
Black-throated SparrowOP
Yeah, like I said

The issue is that it isn't redirecting otherwise I wouldn't have opened a forum post about it haha
Gives me this instead of redirecting
@Black-throated Sparrow Yeah, like I said The issue is that it isn't redirecting otherwise I wouldn't have opened a forum post about it haha
ncls.
I never used it. Using router is the best approach IMO since redirect basically does the same thing under the hood