Navigation — Link, useRouter and the Router Cache

import Link from 'next/link'

<Link href="/problems">Problems</Link>
<Link href={`/problems/${slug}`} prefetch={false}>Open</Link>
<Link href="/dashboard" replace>Go</Link>          // no history entry

// Link prefetches when it enters the viewport (production only), so
// the destination is often already loaded before the click. That is
// most of why App Router navigation feels instant.

// Programmatic — note the import path
'use client'
import { useRouter } from 'next/navigation'        // NOT next/router
const router = useRouter()
router.push('/problems/two-sum')
router.replace('/login')
router.back()
router.refresh()          // re-fetch the current route from the server

// Reading the current location, all from next/navigation:
const pathname = usePathname()                     // '/problems/two-sum'
const params = useParams()                         // { slug: 'two-sum' }
const search = useSearchParams()                   // read-only

// useSearchParams makes a client component dynamic, so wrap it in a
// Suspense boundary or the whole route opts out of static rendering.

// Next keeps the rendered output of visited routes in memory:
//   Next 14:  30s for dynamic routes, 5 minutes for static ones
//   Next 15:  0 by default for dynamic — the change that fixed most
//             of the "stale after save" complaints

// So: save a problem -> navigate to the list -> see the old list.
// The list did not refetch; it came out of the router cache.

// Three ways to clear it, in order of preference:
router.refresh()                          // re-fetch the current route
revalidatePath('/problems')               // from a server action
// and hard navigation (a full page load) clears everything

// After a mutation, the server action should invalidate rather than
// the client guessing:
'use server'
export async function createProblem(data) {
  await db.problem.create({ data })
  revalidatePath('/problems')             // both caches, server-side
}

// Tune it explicitly if you need to:
// next.config.js
experimental: { staleTimes: { dynamic: 0, static: 180 } }

// Debugging rule of thumb: if a hard refresh shows fresh data but
// in-app navigation does not, it is the router cache.

'use client'
const router = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()

function setFilter(key, value) {
  const next = new URLSearchParams(searchParams)
  value ? next.set(key, value) : next.delete(key)
  next.delete('page')                              // reset paging
  router.replace(`${pathname}?${next}`, { scroll: false })
}
// replace, not push: ten filter tweaks should not be ten back presses.
// scroll: false, or every filter change jumps the user to the top.

// A server component reading the same params re-renders with the new
// data automatically — the URL is the state, and both sides read it.

// nuqs is worth knowing: it gives useState-like ergonomics over
// search params, with types and without the boilerplate above.

// Scroll on normal navigation restores position on back/forward and
// goes to the top on a new push, which is what users expect. Override
// only for in-page filtering.

// Anchors under a sticky header:
html { scroll-padding-top: 5rem }