Navigate with <Link>Navigate with <Link>

<a> reloads, <Link> swaps

Press +1, type a filter, then switch pages.

// Bad: a new document, layout state lost
<a href="/reports">Reports</a>

// Good: client transition, layout kept
import Link from 'next/link'

<Link href="/reports">Reports</Link>

layout.tsx vs template.tsx

Type a draft, press +1, then navigate.

// app/(app)/template.tsx
export default function Template({ children }: { children: React.ReactNode }) {
  return <div className="enter">{children}</div>
}

Active link from usePathname()

Type a path or pick one.

usePathname() → /reports/q3

'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'

export function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
  const pathname = usePathname()
  const active = href === '/'
    ? pathname === '/'
    : pathname === href || pathname.startsWith(`${href}/`)

  return (
    <Link href={href} aria-current={active ? 'page' : undefined} className={active ? 'active' : ''}>
      {children}
    </Link>
  )
}

Why it matters, pros and cons