Next.js : useRouter / Link

useRouter is a React Hook that provides access to the router state in your Next.js application. This can be useful for getting the current route, navigating to other routes, and handling route changes.

The useRouter hook returns an object with the following properties:

• pathname: The current path of the route.
• query: The query string of the route.
• asPath: The path as shown in the browser including the search params and respecting the trailingSlash configuration.
• location: An object with properties for the pathname, query, asPath, hash, and state.
• history: An object with methods for navigating to other routes.

For example, the following code would get the current route and the query string:

import React, { useEffect, useRouter } from "react";

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

  const pathname = router.pathname;
  const query = router.query;

  useEffect(() => {
    console.log(pathname, query);
  }, []);

  return (
    <div>
      The current route is {pathname}.
      The query string is {query}.
    </div>
  );
};

export default MyComponent;

 

[useRouter()](<https://nextjs.org/docs/app/api-reference/functions/use-router#userouter>)

• router.push(href: string): Perform a client-side navigation to the provided route. Adds a new entry into the browser’s history stack.
• router.replace(href: string): Perform a client-side navigation to the provided route without adding a new entry into the browser’s history stack.
• router.refresh(): Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. useState) or browser state (e.g. scroll position).
• router.prefetch(href: string): Prefetch the provided route for faster client-side transitions.
• router.back(): Navigate back to the previous route in the browser’s history stack using soft navigation.

Functions: useRouter | Next.js

Link

The Link component in Next.js is a React component that extends the HTML a element to provide prefetching and client-side navigation between routes. It is the primary way to navigate between routes in Next.js.

The Link component is a powerful tool that can be used to navigate between routes in Next.js. It provides a number of benefits, including:

• Prefetching: The Link component can prefetch the page that you want to navigate to, which can improve the performance of your application.
• Client-side navigation: The Link component uses client-side navigation, which means that the page will not reload when you click on a link. This can improve the user experience of your application.
• SEO: The Link component supports SEO, which means that your pages will be indexed by search engines.

https://nextjs.org/docs/app/api-reference/components/link

Components: <Link> | Next.js