use-query-params-hook

A lightweight React hook to get query parameters in Next.js 13+ (App Router) without needing Suspense boundaries.

Features

• Fetch query parameters from the URL easily in Next.js projects.
• Works without Suspense boundary.
• Supports both JavaScript and TypeScript.

Installation

To install the package, use npm:

npm install next-query-manager


import useQueryParams from 'next-query-manager';

const MyComponent = () => {
  const queryParams = useQueryParams();
  const productId = queryParams['productId']; // Access the productId from URL

  return (
    <div>
      <h1>Product ID: {productId}</h1>
    </div>
  );
};

export default MyComponent;



import { useEffect, useState } from 'react';
import useQueryParams from 'next-query-manager';

const ProductDetail = () => {
  const queryParams = useQueryParams();
  const productId = queryParams['productId'];
  const [detailData, setDetailData] = useState(null);

  const fetchData = async (productId) => {
    try {
      const response = await fetch(`/api/products/${productId}`);
      const data = await response.json();
      setDetailData(data);
    } catch (error) {
      console.error('Failed to fetch product details:', error);
    }
  };

  useEffect(() => {
    if (productId) {
      fetchData(productId);
    }
  }, [productId]);

  if (!detailData) return <div>Loading...</div>;

  return <div>{detailData.title}</div>;
};

export default ProductDetail;