How to redirect user outside of React component?

[hazratgs]

I'm migrating a project from CRA to Next.js 13 and the code often uses the history.push('/') methods and the react-router library, something similar is in Pages Router:

import Router from 'next/router'

.  .  .

Router.push('/')

But there is no such approach in App Router, only hooks. Is there a way to use the router outside of a React application?

[Hillsie]

It's in next/navigation;

https://nextjs.org/docs/app/api-reference/functions/use-router

import {  useRouter } from "next/navigation";
...
 const router = useRouter();
 ....
 router.push('/');

[hazratgs]

I read the documentation, but I don't need a hook, but the ability to execute .push() outside of React Component

for example, the project uses redux-saga and the logic needs to switch to another page

[landsman]

register it as callback to window object and call it from whatever you want :)

[aziyatali]

import { NextResponse } from 'next/server';
You can do something like this

const some_url = process.env.someenv; (or any custom url)
return NextResponse.redirect(new URL(some_url));

Can do the same in client-side

[michal-th]

I'd like to implement redirection logic in my client fetch wrapper (intercepting some specific 4xx status codes that provide redirect url as payload), can't figure out any clean way of accessing the client side router - currently had to resolve it with a dirty workaround using window.location..

[barman47]

I found this page yesterday when I had a similar issue. window.location.href was not ideal for me because it messed up my redux state and I had code running before the state was hydrated. I was able to get it to work so I thought to share in case anyone still needed help.

'use server';

import { redirect } from 'next/navigation';

export async function navigate(url: string) {
    redirect(url);
}

My usage:

import { navigate } from '@/app/actions';
. . . 
navigate(`/signUpSuccess?email=${email}`);

This is also contained in the docs.

[MaxKoldun]

thx it helped me

[Slava-Nik]

It helped, thank you.

But generally, is using this server-side code on the client side okay in this case?

I wonder why Next.js stopped providing such a basic and simple functionality?
Yes, I want move my business logic to sagas or somewhere else, and I don't want to keep it in components.

Before this code worked well in Next 12.

import Router from 'next/router'
. . .
Router.push('/')

But now we are getting strange errors like "you should use next/router on client side". (It's client side already, not hooks though.)

[RSkrypnik]

Omg, I cannot believe it's still a problem in next/react unlike nuxt/vue where you can redirect outside of components

[q010p]

Just a heads-up for anyone else running into this:

When you use router.push('/api/your-endpoint'), it first tries to fetch the route via client-side navigation (using fetch). But because it's an API route and not a Next.js page, the browser falls back to a full page reload (document). As a result, the API endpoint gets hit twice, which can be super confusing and frustrating to debug.