How to get the anchor (or hash) from the URL in Next.JS 15 App Router

When building web applications with Next.js 15's App Router, you might need to access the URL's anchor (also known as the hash) - the part that comes after the # symbol. While this seems like it should be straightforward, there are some important considerations due to Next.js's server-side rendering nature.

The Challenge

In traditional client-side JavaScript, you could simply use window.location.hash to get the anchor. However, with Next.js:

1. Components can be server-side rendered, where window is not available

2. The App Router uses client-side navigation, requiring us to listen for hash changes

3. We need to ensure our solution works with both initial page loads and subsequent navigations

The Solution: A Custom Hook

Here's a custom React hook that safely handles getting the URL anchor in Next.js:

"use client";

import { useEffect, useState } from "react";

export function useUrlAnchor() {
  const getHash = () =>
    typeof window !== "undefined"
      ? decodeURIComponent(window.location.hash)
      : "";
  const [hash, setHash] = useState(getHash());

  useEffect(() => {
    const onHashChange = () => {
      setHash(getHash());
    };
    window.addEventListener("hashchange", onHashChange);
    return () => window.removeEventListener("hashchange", onHashChange);
  }, []);

  return hash;
}

How It Works

Let's break down the key elements of this hook:

1. "use client" directive: This is crucial as it tells Next.js that this code should only run on the client side, where window can be available.

2. Initial state: We initialize the state with the current hash from getHash() function that checks if window is available

3. Event listener: The useEffect hook sets up a listener for the hashchange event, updating our state whenever the URL's anchor changes. We also clean up the event listener when the component unmounts.

Usage Example

Here's how to use the hook in your components:

export function TableOfContents({ items }: Props) {
  const hash = useUrlAnchor();
  function isActive(href: string) {
    return hash === href;
  }

  return (
    <div>
      <h2>On this page</h2>
      <ul>
        {items.map((item) => (
          <li key={item.href}>
            <a
              href={`#${item.href}`}
              className={cn("flex items-center gap-2 p-1", {
                "text-blue-500": isActive(item.href),
              })}
            >
              <ChevronRight className="h-4 w-4 text-slate-400" />
              {item.title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Conclusion

Working with URL anchors in Next.js requires careful consideration of the server-side rendering context. The provided hook offers a robust solution that works well with the App Router while maintaining good practices for client-side code. Remember to always use the "use client" directive in your implementations.

Happy coding! 🚀