Harnessing the Power of Next.js Navigation Hooks: usePathname and useParams

Navigation in web development is key. Knowing where the user is and the parameters that define the current route can greatly enhance the user experience and functionality of an application. In this blog post, we delve into two client component hooks that Next.js offers for managing navigation and routing: usePathname and useParams.

An Insight into usePathname

usePathname is a hook that allows you to read the current URL's pathname. To implement it in a Next.js application, you call usePathname() in a client component and it will return the current pathname.

Here's a simple usage of the hook:

'use client'

import { usePathname } from 'next/navigation'

export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

This hook is intentionally designed to be used within a Client Component. These components are an integral part of the Server Components architecture and are not considered a de-optimization.

For instance, a Client Component with usePathname will render into HTML on the initial page load. Subsequent navigation does not necessitate a re-fetch of this component; instead, it is downloaded once (in the client JavaScript bundle), and re-renders based on the current state.

Note that reading the current URL from a Server Component is not supported. This design preserves layout state across page navigations.

In compatibility mode, usePathname may return null when a fallback route is being rendered, or when a pages directory page has been automatically statically optimized by Next.js and the router is not ready.

The usePathname hook does not accept any parameters. It returns a string representing the current URL's pathname.

Here are a few examples of its usage:

URL	Returned value
/	'/'
/dashboard	'/dashboard'
/dashboard?v=2	'/dashboard'
/blog/hello-world	'/blog/hello-world'

This hook is handy when you need to execute something in response to a route change:

'use client'

import { usePathname, useSearchParams } from 'next/navigation'

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Do something here...
  }, [pathname, searchParams])
}

Leveraging useParams

useParams is another Client Component hook provided by Next.js that lets you read a route's dynamic params filled in by the current URL.

Consider the following example:

'use client'

import { useParams } from 'next/navigation'

export default function ExampleClientComponent() {
  const params = useParams()

  // Route -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)

  return <></>
}

The useParams hook does not accept any parameters. It returns an object containing the current route's filled in dynamic parameters. If the route contains no dynamic parameters, useParams returns an empty object. In pages, useParams will return null.

Here's an example illustrating how it behaves for various routes:

| Route | URL | useParams() |
|-------|-----|---——--------|
| app/shop/page.js | /shop | null |
| app/shop/[slug]/page.js | /shop/1 | { slug: '1' } |
| app/shop/[tag]/[item]/page.js | /shop/1/2 | { tag: '1', item: '2' } |
| app/shop/[...slug]/page.js | /shop/1/2 | { slug: ['1', '2'] } |

In Conclusion

usePathname and useParams are powerful tools provided by Next.js to handle navigation and routing within an application. They provide a developer with the ability to read and react to the current URL's pathname and dynamic parameters, enabling the development of dynamic and interactive web applications. Harnessing these hooks will take your Next.js development to the next level.