Approach to get the current pathname

We are going to use a usePathname hook. usePathname hook is a client component hook. It is used to get a current URL’s pathname. To use a usePathname hook, We need to import it from the “next/navigation” module and we also have to our component to the client component using the “use client” keyword.

Syntax:

'use client';
import { usePathname } from "next/navigation";

export default function Page() {
  const pathname = usePathname()
  return (
    <>
      <h1>{pathname}</h1>
    </>
  );
}

NextJS is a React framework that is used to build full-stack web applications. It is used both for front-end as well as back-end. It comes with a powerful set of features to simplify the development of React applications. In this article, we will learn about How to get the current pathname in the app directory of NextJS.