How do you handle routing in a Next.js app?

Next.js handles routing through a combination of file-system conventions and client-side navigation components:

### 1. Declarative Navigation (<Link>):
Always use next/link for internal transitions to enable automatic prefetching and prevent full page reloads:

import Link from 'next/link';

<Link href="/about" prefetch={true} className="nav-link">
  About Us
</Link>

### 2. Programmatic Navigation:
Use the useRouter hook from next/navigation:

'use client';
import { useRouter } from 'next/navigation';

export function LoginButton() {
  const router = useRouter();
  
  const handleLogin = async () => {
    await authService.login();
    router.push('/dashboard');
    router.refresh(); // Refreshes server components
  };

  return <button onClick={handleLogin}>Log In</button>;
}

### 3. Reading Route Parameters:

• useParams(): Access dynamic URL parameters (e.g. id).
• useSearchParams(): Read query strings (?category=tech).