body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
}
h1 {
color: #333333;
}
p {
color: #666666;
}

How to use “useRouter()” with Next.js 13

If you are using Next.js to build your web application, you may come across the need to navigate between different pages programmatically. This is where the useRouter() hook comes in handy.

What is useRouter()?

useRouter() is a hook provided by the Next.js framework that allows you to access the router object. This object provides methods to manipulate the browser history and navigate between pages.

How to use useRouter()?

Using useRouter() is quite simple. First, you need to import it from the next/router module:

import { useRouter } from 'next/router';

Once imported, you can use the useRouter() hook in your functional component like this:

const router = useRouter();

Now, you have access to the router object and its methods. Here are some common use cases:

• Navigating to a different page: You can use the router.push() method to navigate to a different page programmatically. For example:

router.push('/about');

• Redirecting to another page: You can use the router.replace() method to redirect to another page. For example:

router.replace('/login');

• Getting the current route information: You can access the current route information using the router.pathname and router.query properties.

By using useRouter() in your Next.js application, you can easily navigate between pages and manipulate the browser history, providing a seamless user experience.

Conclusion

The useRouter() hook is a powerful tool provided by Next.js to handle client-side routing in your web application. By using it effectively, you can create a smooth and intuitive navigation experience for your users. So, next time you need to handle navigation in your Next.js application, don’t forget to reach for the useRouter() hook!