How to use query parameter as variable in rewrite in nextjs

In Next.js, you can use query parameters as rewrite variables to dynamically handle URLs, which is highly beneficial for building applications with clean URL structures. Here are the steps and examples to achieve this:

Step 1: Configure Rewrite Rules in next.config.js

First, configure rewrite rules in the project's next.config.js file. Rewriting enables you to map one URL path to another while maintaining a clean and user-friendly URL structure.

Suppose you have a blog application where you want the URL for a single blog post to be /post/123 instead of /post?slug=123. You can set up the rewrite rules as follows:

javascript
module.exports = {
  async rewrites() {
    return [
      {
        source: '/post/:slug',
        destination: '/post?slug=:slug' // Map path parameters to query parameters
      }
    ]
  }
}

Step 2: Retrieve Query Parameters in Page Components

After configuring the rewrite rules, you can access these query parameters in your page components using Next.js's useRouter hook. This enables you to render different content based on the URL parameters.

For example, if your page path is /pages/post.js, you can retrieve the query parameters as follows:

javascript
import { useRouter } from 'next/router'

function Post() {
  const router = useRouter()
  const { slug } = router.query // Access the slug parameter via destructuring

  return (
    <div>
      <h1>Post: {slug}</h1>
      {/* Fetch and display the blog post based on the slug from an API */}
    </div>
  )
}

export default Post

Practical Example

Suppose you run a movie database website where you want users to access movie details via clean URLs, such as /movie/the-dark-knight instead of /movie?title=the-dark-knight. You can set up the rewrite rules as described and retrieve the title parameter in the movie details page.

This configuration enhances URL readability and SEO-friendliness while making the page logic more transparent and manageable.

Summary

By configuring rewrite rules in next.config.js and correctly retrieving and using query parameters in page components, you can effectively leverage Next.js's routing capabilities to enhance application functionality and user experience. This approach is highly beneficial for building complex, highly customizable web applications.

In Next.js, using query parameters as variables is a common use case, especially when handling routes and dynamic content. Next.js's routing system enables us to handle query parameters easily through file and folder structures along with specific APIs.

For example, when developing an e-commerce website and needing to display product listings based on the user's search query, you can use Next.js's dynamic routes and query parameters to achieve this.

First, create a file named [search].js in the pages directory, where the brackets in the filename indicate a dynamic route that matches paths like /search?keyword=shoes.

javascript
// pages/search.js

import { useRouter } from 'next/router';

export default function Search() {
    const router = useRouter();
    const { query } = router;
    const { keyword } = query; // Extract the keyword from query parameters

    // Here, you can use the keyword variable to request backend APIs or perform other operations
    return (
        <div>
            <h1>Search Results</h1>
            <p>You searched for: {keyword}</p>
            {/* Add more content for search results */}
        </div>
    );
}

In this example, we use Next.js's useRouter hook to access current route information, including query parameters. This component renders a title and the user's search keyword.

One advantage of this approach is its flexibility and intuitiveness. Developers can easily access and use parameters from the URL without the need to worry about the complexity of configuring routes. Additionally, due to Next.js's built-in optimizations and prerendering features, this method also helps improve application performance and SEO.

Using query parameters as variables can greatly enhance application interactivity, enabling users to access different content through simple URL changes, which is very helpful for improving user experience and application usability.