NextJS URL Parameters: Guide to Dynamic Routing

• Introduction
• Step-by-Step Guide
• Code Example
• Additional Notes
• Summary
• Conclusion
• References

This article explains how to work with URL parameters in Next.js, covering dynamic routes, accessing parameters, programmatic navigation, query parameters, URL state in the App Router, and important considerations like data fetching and client-side routing.

Next.js provides a file-system based router that makes handling dynamic routes and URL parameters straightforward. Here's a breakdown of how to work with them:

1. Defining Dynamic Routes:

• File Structure: Create a folder and file within your pages directory that represents the dynamic segment of your URL. For example, to handle URLs like /users/123, you would create:

  pages/
    users/
      [id].js 
  

• The [id].js File: This file will handle all requests that match the /users/ pattern followed by any value. Inside this file, you can access the dynamic segment (123 in our example) using the useRouter hook.

  import { useRouter } from 'next/router';
  
  function UserDetailPage() {
    const router = useRouter();
    const userId = router.query.id;
  
    return (
      <div>
        <h1>User Details</h1>
        <p>User ID: {userId}</p>
      </div>
    );
  }
  
  export default UserDetailPage;

2. Accessing URL Parameters:

• useRouter Hook: The useRouter hook from next/router provides access to the query object, which contains all the dynamic segments of the current URL.

  import { useRouter } from 'next/router';
  
  function MyComponent() {
    const router = useRouter();
    const { id, category } = router.query; 
  
    // ... use id and category
  }

3. Programmatically Navigating with Parameters:

• push Method: You can programmatically navigate to dynamic routes using the push method of the useRouter hook.

  import { useRouter } from 'next/router';
  
  function MyComponent() {
    const router = useRouter();
  
    const handleClick = () => {
      router.push(`/users/456`); 
    };
  
    return (
      <button onClick={handleClick}>Go to User 456</button>
    );
  }

4. Query Parameters:

• Appending to URLs: To add query parameters like ?search=term, you can append them directly to the URL string when using router.push.

  router.push(`/products?search=shoes&category=men`);

• Accessing Query Parameters: You can access query parameters just like dynamic segments, using the router.query object.

  const { search, category } = router.query;

5. URL State (App Router):

• Passing State with push: In the App Router, you can pass state along with the URL using the push method's second argument.

  router.push('/dashboard', { state: { name: 'John' } });

• Accessing State: Access the passed state using router.state.

  const { name } = router.state;

Important Notes:

• Data Fetching: For dynamic routes, you'll often need to fetch data based on the URL parameters. Consider using getServerSideProps or getStaticProps for this purpose.
• Client-Side Routing: Next.js handles routing on the client-side, providing a smooth user experience.
• React Router: While you can use React Router with Next.js, it's generally recommended to leverage Next.js's built-in routing capabilities for most use cases.

By mastering these techniques, you can effectively manage dynamic routes and URL parameters in your Next.js applications, creating dynamic and user-friendly experiences.

This code is a Next.js application demonstrating URL parameters. It includes a homepage with links to dynamic product and user pages. The product page displays product details based on the productId and an optional color query parameter. The user page shows the userId and has a button that programmatically navigates to a specific product page with a query parameter. The example uses dynamic routes, the useRouter hook to access query parameters, and demonstrates programmatic navigation.

This example showcases how to define dynamic routes, access URL parameters, and navigate programmatically in a Next.js application.

Project Structure:

pages/
  index.js
  products/
    [productId].js
  users/
    [userId].js

1. pages/index.js (Homepage):

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Homepage</h1>
      <ul>
        <li>
          <Link href="/products/1?color=red">Product 1 (Red)</Link>
        </li>
        <li>
          <Link href="/users/john-doe">User John Doe</Link>
        </li>
      </ul>
    </div>
  );
}

2. pages/products/[productId].js (Dynamic Product Page):

import { useRouter } from 'next/router';

export default function ProductDetailPage() {
  const router = useRouter();
  const { productId } = router.query;
  const color = router.query.color || 'default'; // Access query parameter

  return (
    <div>
      <h1>Product Details</h1>
      <p>Product ID: {productId}</p>
      <p>Color: {color}</p>
    </div>
  );
}

3. pages/users/[userId].js (Dynamic User Page):

import { useRouter } from 'next/router';

export default function UserProfilePage() {
  const router = useRouter();
  const userId = router.query.userId;

  const handleClick = () => {
    router.push('/products/2?color=blue'); // Programmatic navigation
  };

  return (
    <div>
      <h1>User Profile</h1>
      <p>User ID: {userId}</p>
      <button onClick={handleClick}>View Product 2 (Blue)</button>
    </div>
  );
}

Explanation:

• Dynamic Routes: The [productId].js and [userId].js files define dynamic routes for products and users, respectively.
• useRouter Hook: We use the useRouter hook to access the query object, which contains the dynamic segments (productId, userId) and query parameters (color).
• Programmatic Navigation: In UserProfilePage, we use router.push to navigate to a specific product page with a query parameter.

This example demonstrates the fundamental concepts of working with URL parameters in Next.js. You can expand upon this foundation to build more complex and dynamic applications.

Here are some additional notes to supplement the article:

Dynamic Routes:

• Catch-all Routes: You can create catch-all routes using three dots ([...]) inside the file/folder name within the pages directory. For example, pages/posts/[...slug].js would match /posts/a, /posts/a/b, /posts/a/b/c, and so on. The slug parameter in this case would be an array containing the segments.
• Nested Dynamic Routes: You can nest dynamic routes to create more complex URL structures. For example, pages/categories/[category]/[productId].js would match URLs like /categories/electronics/123.

Data Fetching:

• Data Fetching Methods: When fetching data based on URL parameters, choose the appropriate data fetching method (getServerSideProps, getStaticProps, or client-side fetching) based on your application's requirements for SEO, performance, and data freshness.
• Error Handling: Implement robust error handling for cases where data fetching fails or the requested data is not found.

Other Considerations:

• URL Encoding: When programmatically constructing URLs with parameters, ensure proper URL encoding to handle special characters.
• Security: Be mindful of potential security vulnerabilities when working with URL parameters, especially if you're using them to fetch sensitive data or perform actions on the server.
• Shallow Routing: Use the shallow option with router.push to update the URL without triggering a full page reload. This can be useful for updating query parameters without re-fetching data.

Additional Tips:

• Console Logging: Use console.log(router) to inspect the router object and its properties, including the query object, to understand how URL parameters are being parsed and accessed.
• Type Safety: For improved type safety, consider using TypeScript and defining types for your URL parameters.

By understanding these nuances and best practices, you can build more robust and dynamic Next.js applications that effectively leverage URL parameters for routing and data management.

This article provides a concise guide to handling dynamic routes and URL parameters in Next.js applications:

Key Takeaways:

• Next.js simplifies dynamic routing with its file-system based approach.
• The useRouter hook is essential for accessing and manipulating URL parameters.
• Data fetching for dynamic routes is crucial and can be achieved using getServerSideProps or getStaticProps.
• While React Router can be used, leveraging Next.js's built-in routing is generally recommended.

By understanding these concepts and leveraging the tools provided by Next.js, developers can create highly dynamic and user-friendly web applications that respond effectively to various URL structures and parameters. This enables the development of robust and efficient applications that cater to complex routing requirements and enhance the overall user experience.

• Routing: Dynamic Routes | Next.js | Dynamic Routes are pages that allow you to add custom params to your URLs. Start creating Dynamic Routes and learn more here.
• How to append params to url? : r/nextjs | Posted by u/skorphil - 3 votes and 8 comments
• Ability to push changes to url without re-rendering · vercel next.js ... | I am working on a project that has a page which works similar to google maps. As a user zooms/moves the map around, the url should be replaced with the updated center latitude and longitude values....
• How to use URL state with the App Router (zero useState calls) : r ... | Posted by u/lrobinson2011 - 323 votes and 35 comments
• React Router Hook => useParam() (now w/ Typescript) - DEV ... | While working on a project I needed to get some information out of the URL in the browser. Using the...
• Using React Router searchParams to manage filter state for a list ... | Filtering data for a UI list by criteria expressed in the URL query string in a React Single Page Application
• React Router testing with Params. Like many things in front end ... | Like many things in front end development, the implementation can be faster than the test writing, especially when needing to abstract out…
• Next.js SPA example with dynamic client-only routing and static ... | Next.js SPA example with dynamic client-only routing and static hosting - 00-README-NEXT-SPA.md
• Building a blog with Next.js 14 and React Server Components | Use MDX, RSC, and Bright to build a blog with Next.js 14.