How to Programmatically Change a Route in Next.js

Changing routes programmatically in Next.js is a common requirement when building web applications. In this blog post, we’ll explore two different approaches to achieve this goal.

Using the useRouter Hook

If you are inside a React component, you can leverage the useRouter hook provided by Next.js. This hook gives you access to the router object that you can use to navigate to different routes. Here’s an example of how to use it:

import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();

  const handleClick = () => {
    router.push('/test');
  };

  return (
    <button onClick={handleClick}>Go to /test</button>
  );
};

In the above code snippet, we import the useRouter hook from the next/router module. Then, we initialize the router variable using this hook. Inside the handleClick function, we call the push method on the router object with the desired route as the argument.

Using the Router Object

In situations where you are not inside a React component, like in a utility function or a module, you can use the next/router module directly to change the route. Here’s an example:

import Router from 'next/router';

const changeRoute = () => {
  Router.push('/test');
};

changeRoute();

In this example, we import the Router object from the next/router module. Then, we define a changeRoute function which calls the push method on the Router object to navigate to the /test route.

By following these approaches, you can programmatically change routes in Next.js, ensuring smooth navigation within your applications.