Using next/router outside of components

[ezhikov]

Documentation states that I have to either use useRouter or withRouter to access router and I can't find a way to use router outside of components. Thing is, that almost all side effects are handled inside state management library and creating additional state and useEffect just for redirecting user to another page (in my case - error page) seem unnecessary. Is there a way to use router outside of components? I tried to import {Router} from 'next/router', but got TypeError: Router.push is not a function.

[jamesmosier]

You should be able to import the Router instance and then call Router.push on it via:

import Router from 'next/router'

[omerman]

@jamesmosier I must say this is very confusing.. I think it should be changed...
having the 'next/router' file expose variable named Router makes code editors suggest along side the default export, which can be very confusing if you don't know about it.

[ryanflowers]

+1 on the way these imports work, that really should be fixed as its completely confusing. You have two options

// The router instance
import * as Router from 'next/router';

// Some other objects with only a subset of functionality
import { Router } from 'next/router';

[sunniejai]

Are there any downsides of using this instead of using the useRouter() hook?

[JJPell]

Is there a way to do this for the nextjs app router (next/navigation)?

[aryankarim]

I get this.

Error: No router instance found.
You should only use "next/router" on the client side of your app.

[vinit-churi]

Is there a way to do this for the nextjs app router (next/navigation)?

will (next/router) not work in app router?

[BrightKingsley]

No, can't find the push, replace,... methods on it.
Any way to implement this in app router?

[Tweedle2Dum]

This seems weird and should not be happening, here is my code for using it outside a functional component (I am using app router). I just imported the Router object from next/router and directly used it.

import axios from "axios";
import { storage } from "./storage";
import { BASE_URL } from "./constants";
import Router from "next/router";

const API = axios.create({
  baseURL: BASE_URL, 
  timeout: 10000, 
  headers: {
    "Content-Type": "application/json",
  },
});

API.interceptors.request.use(
  (config) => {
    const token = storage.getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

API.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401 && typeof window !== undefined) {
      Router.push('/sign-in')
    }
  }
);
export { API };

[isBatak]

There is window.next.router.push() but it's only available for debugging purposes.

next.js/packages/next/src/client/components/app-router.tsx

Line 417 in 74943b6

// Exists for debugging purposes. Don't use in application code.

[RomanSkrypnik]

Seems like we will wait for eternity untill Next releases redirect outside of components for app router