How to Detect URL Changes and Fire a Specific Function in Next.js

Hello, everyone. Today, I'm going to talk about how to fire a specific function when the URL changes in Next.js. This will fire not only on page transitions but also on browser back events.

Table of Contents

1. Introduction
2. What is Next.js?
3. What is URL Transition Detection?
4. How to Detect URL Transitions
5. About URL Change Judgment
6. Conclusion

Introduction

Next.js is a framework of React that offers many features like server-side rendering and static site generation. In this article, I'll explain how to detect URL transitions and fire a specific function by combining Next.js's useRouter hook and React's useEffect hook.

What is Next.js?

Next.js is a JavaScript framework based on React, enhancing the features of React, such as server-side rendering (SSR) and static site generation (SSG). Next.js has its own routing system, which allows us to detect URL transitions.

What is URL Transition Detection?

When a user navigates between pages, the URL changes. Let's think about detecting this change and firing a specific function. This includes situations like closing a sidebar when a user moves to another page.

How to Detect URL Transitions

Let's see how to detect URL transitions and fire a specific function by combining Next.js's useRouter hook and React's useEffect hook.

import { useEffect, useRef } from 'react';
import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();
  const previousUrlRef = useRef(router.asPath);

  useEffect(() => {
    const handleRouteChange = (url: string) => {
      if (url !== previousUrlRef.current) {
        // Only process when the URL has actually changed
        console.log('The URL has changed:', url);
        // Write the function you want to fire here

        // Save the current URL
        previousUrlRef.current = url;
      }
    };

    router.events.on('routeChangeComplete', handleRouteChange);

    // Remove the event listener when the component is unmounted
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router]);

  return <div>Your component here</div>;
};

export default MyComponent;

In this code, we are listening to URL changes using router.events.on('routeChangeComplete', handleRouteChange); inside useEffect. When the URL changes, the handleRouteChange function is called, allowing us to execute a specific function for each URL change.

About URL Change Judgment

The presence of useRef and the if (url !== previousUrlRef.current) judgment in this code is to ensure that specific processing is performed only when the URL has actually changed.

useRef creates a reference object called previousUrlRef. This object holds the URL just before the transition (the URL before the transition) through its current property.

const previousUrlRef = useRef(router.asPath);

The conditional expression if (url !== previousUrlRef.current) ensures that processing is performed only when the newly transitioned URL (url) is different from the URL just before the transition (previousUrlRef.current).

if (url !== previousUrlRef.current) {
  // Only process when the URL has actually changed
  console.log('The URL has changed:', url);
  // Write the function you want to fire here

  // Save the current URL
  previousUrlRef.current = url;
}

This prevents the situation where firing occurs multiple times for the same URL. Also, this judgment allows you to perform specific processing (in this example, console.log and the subsequent function call) only when the URL has actually changed.

Conclusion

By combining Next.js's useRouter hook and React's useEffect hook, you can detect URL transitions and fire a specific function. Furthermore, by using useRef and the judgment of URL changes, you can ensure that specific processing is performed only when the URL has actually changed. This allows you to implement dynamic behavior according to user page transitions.

Happy Coding!