Next.js Path Extractor: Custom Hook for URL Paths & Query Parameters

Introducing usePathExtractor – a custom React hook for Next.js that simplifies extracting and managing URL paths, query parameters, and active route states. It helps developers efficiently work with dynamic routing, making navigation handling more intuitive.

"use client";

import { usePathname, useSearchParams } from "next/navigation";
import { useMemo } from "react";

export const usePathExtractor = () => {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const queryParams = useMemo(() => {
    const params: Record<string, string | string[]> = {};
    searchParams.forEach((value, key) => {
      if (params[key]) {
        params[key] = Array.isArray(params[key])
          ? [...params[key], value]
          : [params[key], value];
      } else {
        params[key] = value;
      }
    });
    return params;
  }, [searchParams]);

  const fullUrl = useMemo(() => {
    if (typeof window !== "undefined") {
      return window.location.href;
    }
    return "";
  }, []);

  const basePath = useMemo(() => {
    return pathname.split("/").slice(0, 2).join("/");
  }, [pathname]);

  const isActiveRoute = (route: string) => {
    return pathname.startsWith(route);
  };

  return {
    pathname,
    fullUrl,
    basePath,
    queryParams,
    isActiveRoute,
  };
};

Benefits:
✅ Effortless Query Parameter Extraction – Converts search params into an easily accessible object.
✅ Retrieve Full URL – Get the complete URL directly from the hook.
✅ Base Path Management – Extract the main route without extra logic.
✅ Active Route Detection – Easily check if a route is currently active.

Perfect for building dynamic dashboards, filtering systems, and improving navigation handling in Next.js projects! 🚀

JAKER HOSSAIN @jackfd120

Next.js Path Extractor: Custom Hook for URL Paths & Query Parameters

Comments 0 total