1. useParams — Read Dynamic Route Parameters
useParams() lets you access dynamic segments from the current URL inside Client Components.
'use client'
import { useParams } from 'next/navigation'
const params = useParams<{ tag: string; item: string }>()
// URL: /shop/shoes/nike-air-max-97
// params: { tag: 'shoes', item: 'nike-air-max-97' }
2. usePathname — Get the Current Pathname
usePathname() returns the current pathname. Wrap it in a <Suspense> boundary to avoid hydration mismatches during SSR.
3. useSearchParams — Access Query Strings
useSearchParams() returns a read-only URLSearchParams object to read query strings using .get(), .has(), etc.
4. useRouter — Programmatic Navigation
useRouter() enables navigation from within Client Components.
push(): Navigate and add to historyreplace(): Navigate without adding to historyrefresh(): Re-fetch and re-render the current routeprefetch(): Prefetch route data
5. useSelectedLayoutSegment(s) — Read Active Route Segments
Use useSelectedLayoutSegment() or useSelectedLayoutSegments() in Layouts to build breadcrumbs, tabs, or sidebars.
6. useReportWebVitals — Track Performance Metrics
useReportWebVitals() reports metrics like FCP, LCP, and CLS. Use it in a dedicated Client Component imported into your root layout.
7. useLinkStatus — Inline Navigation Feedback
useLinkStatus() tracks the pending state of a <Link> to show subtle UI feedback during navigation.
8. unauthorized — Custom 401 Handling (Experimental)
unauthorized() throws a 401 error and renders unauthorized.tsx. Enable authInterrupts in next.config.js.
9. unstable_cache — Memoize Expensive Operations
unstable_cache() caches results of expensive functions like database queries. Use tags and revalidate for fine-grained control.
10. updateTag — Real-Time Cache Invalidation
updateTag() is used in Server Actions to invalidate cached data immediately after a mutation.
11. unstable_noStore — Opt Out of Caching
unstable_noStore() disables caching and forces dynamic rendering for the current request.
12. unstable_rethrow — Preserve Next.js Error Behavior
Use unstable_rethrow() inside try/catch to preserve behavior of notFound() or redirect().
13. userAgent — Detect Device and Browser Info
Use userAgent() in Route Handlers to detect device type and rewrite URLs accordingly.
Summary Table
| Hook / API | Purpose | Context |
|---|---|---|
| useParams() | Read dynamic route params | Client Components |
| usePathname() | Get current pathname | Client Components |
| useSearchParams() | Read query strings | Client Components |
| useRouter() | Programmatic navigation | Client Components |
| useLinkStatus() | Inline feedback for links | Client Components |
| useReportWebVitals() | Report performance metrics | Client Components |
| unauthorized() | Custom 401 error handling | Server Components |
| unstable_cache() | Memoize expensive operations | Server Components |
| updateTag() | Invalidate cache after mutation | Server Actions |
| unstable_noStore() | Disable caching | Server Components |
| unstable_rethrow() | Preserve error behavior | Server Components |
| userAgent() | Detect device/browser info | Route Handlers |