Next.js Functions: useParams

Next.js is known for its ability to create dynamic and highly optimized web applications. Among them, useParams allows you to access route parameters and enhance the interactivity and functionality of the applications. In this article, we will explore what useParams is and how it works.

What is useParams?

In Next.js, useParams is a hook used to retrieve the parameters from the URL of a dynamic route. Dynamic routing is a key feature in Next.js that enables developers to create pages with variable paths. These variable paths can capture segments of the URL as parameters, which can then be used to fetch data or render specific content.

For example, a blog application might have a route for individual posts like /posts/[id], where [id] is a dynamic segment representing the post ID.

How to Use useParams?

To use useParams, you need to create a dynamic route and then access the parameters within a page or component.

Steps to Implement useParams

Step 1: Run the following command to create a new Next Application.

npx create-next-app myproject

When we open our app in a code editor we see the following project structure.

Project Structure

Dependencies

"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.5"
}

Approach:

The useParams hook allows you to read dynamic parameters from the current URL in a Next.js application, making it particularly useful for creating dynamic routes such as product pages or user profiles.

Next.js utilizes a file-based routing system, enabling the creation of dynamic routes by using square brackets in filenames within the app directory.

For example, to configure a dynamic route for a product page, you would create a folder named [id] inside the app/products directory, and place a page.tsx (or page.js if not using TypeScript) file inside this folder. This setup enables the page to respond to different product IDs dynamically based on the URL.

Example: In this example a profuct page is created clicking on each product a new product details page opens up.

// src/app/products/product.tsx
import Link from "next/link";

type Product = {
    id: string,
    name: string,
    description: string,
    price: number,
};

const products: Product[] = [
    {
        id: "1",
        name: "Product 1",
        description: "Description for Product 1",
        price: 100,
    },
    {
        id: "2",
        name: "Product 2",
        description: "Description for Product 2",
        price: 200,
    },
];

const ProductList: React.FC = () => {
    return (
        <div>
            <h1>Product List</h1>
            <ul>
                {products.map((product) => (
                    <li key={product.id}>
                        <Link href={`/products/${product.id}`}>{product.name}</Link>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default ProductList;

// src/app/products/[id]/page.tsx
"use client";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";

type Product = {
    id: string,
    name: string,
    description: string,
    price: number,
};

const ProductPage: React.FC = () => {
    const params = useParams();
    const { id } = params;
    const [product, setProduct] = (useState < Product) | (null > null);

    useEffect(() => {
        if (id) {
            const products: Product[] = [
                {
                    id: "1",
                    name: "Product 1",
                    description: "Description for Product 1",
                    price: 100,
                },
                {
                    id: "2",
                    name: "Product 2",
                    description: "Description for Product 2",
                    price: 200,
                },
            ];
            const foundProduct = products.find((prod) => prod.id === id);
            setProduct(foundProduct ?? null);
        }
    }, [id]);

    if (!product) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <h1>Product ID: {id}</h1>
            <h2>{product.name}</h2>
            <p>{product.description}</p>
            <p>Price: ${product.price}</p>
        </div>
    );
};

export default ProductPage;

Step to run the application: Run your Next.js app using the following command:

npm run dev

Output:

Benefits of Using useParams

Dynamic Content Rendering: The primary benefit of using useParams is the ability to render dynamic content based on URL parameters. This is essential for applications like blogs, e-commerce sites, and user profiles, where the content changes based on the URL segment.

Improved User Experience: Dynamic routing enhances the user experience by providing more interactive and personalized content. Users can navigate directly to specific items or pages without needing to go through a static list.

SEO Optimization: Next.js supports server-side rendering (SSR) and static site generation (SSG), both of which can use dynamic routes for improved SEO.

Simplified Codebase: Using dynamic routes and useParams helps keep your codebase clean and manageable. Instead of creating multiple static pages, you can create a single dynamic template that handles various URL segments.

bishalpaul34

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• Next.js