NextJS throws an error when redirecting the user after a tRPC mutation has settled

Question

I've got a Signup page (as a client component), in which the user enters the data and the data is sent to the server for Authentication via tRPC. The data gets sent, the authentication stuff happens on the back-end but then, when I use the redirect() function in NextJS (from the next/navigation module), it basically throws a NEXT_REDIRECT error in the client console.

Here's the code:

"use client"

import { redirect } from "next/navigation"
import { trpc } from "../_trpc/client"

...

export default function SignupForm() {
    const authSignup = trpc.auth.signup.useMutation({
        onSettled: () => {
            console.log("Mutation Settled")
            redirect("/")
        },
    })

    async function onSubmit(values: z.infer<typeof formSchema>) {
        authSignup.mutate({
            email: values.email,
            username: values.username,
            password: values.password,
            passwordConf: values.passwordConf,
        })
    }

    ...
}

Any solutions?

Answer 1

Okay so, the solution was to use the push() method coming with the useRouter() function instead. I tried this but got an error saying Error: NextRouter was not mounted, so after some research I found out that my IDE was importing the method from the wrong module repeatedly. The useRouter() function should be imported from the next/navigation module, NOT next/router.