1. Read the request parameters/data in the component/page

              'use client'
              import React from 'react';
              import { useState, useEffect } from "react";
              import { useSearchParams } from 'next/navigation'


              export default function Home() {              

                const searchParams = useSearchParams()
                const id = searchParams.get('id')
                console.log(id);

                const category = searchParams.get('category')
                console.log(category);

              

1. import { useSearchParams } from 'next/navigation'

2. const searchParams = useSearchParams()

Option 1: using URL parameters

                         
              import Link from 'next/link'
              export default function Home() {
                return (
                  <div>
                    <Link href="/blog?id=1&category=news">
                      <a>Product 1</a>
                    </Link>
                    <Link href="/blog?id=2&category=technology">
                      <a>Product 2</a>
                    </Link>
                </div>
                );
              }

              

Option 2: pass object data

              import Link from 'next/link';

              export default function MyComponent() {
                return (
                  <Link
                    href={ {
                      pathname: '/blog',
                      query: { id: 'john', category: '30' },
                    }}
                  >
                    <a>Go to User</a>
                  </Link>
                );
              }