Search Params

• The useSearchParams hook .

import { useSearchParams } from 'next/navigation';
const searchParams = useSearchParams();
const status = searchParams.get('status');

Task 1: List Tasks

• http://localhost:3000/tasks?status=PENDING

• Create page - tasks/page.tsx

'use client';

import { useParams } from 'next/navigation';

export default function ListTasks() {
  const searchParams = useSearchParams();
  const status = searchParams.get('status');
  console.log('status:', status);
  return <main>Task Status : {status}</main>;
}