1# Functions
2 
3Next.js function APIs.
4 
5Reference: https://nextjs.org/docs/app/api-reference/functions
6 
7## Navigation Hooks (Client)
8 
9| Hook | Purpose | Reference |
10|------|---------|-----------|
11| `useRouter` | Programmatic navigation (`push`, `replace`, `back`, `refresh`) | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-router) |
12| `usePathname` | Get current pathname | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-pathname) |
13| `useSearchParams` | Read URL search parameters | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-search-params) |
14| `useParams` | Access dynamic route parameters | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-params) |
15| `useSelectedLayoutSegment` | Active child segment (one level) | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment) |
16| `useSelectedLayoutSegments` | All active segments below layout | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segments) |
17| `useLinkStatus` | Check link prefetch status | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-link-status) |
18| `useReportWebVitals` | Report Core Web Vitals metrics | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-report-web-vitals) |
19 
20## Server Functions
21 
22| Function | Purpose | Reference |
23|----------|---------|-----------|
24| `cookies` | Read/write cookies | [Docs](https://nextjs.org/docs/app/api-reference/functions/cookies) |
25| `headers` | Read request headers | [Docs](https://nextjs.org/docs/app/api-reference/functions/headers) |
26| `draftMode` | Enable preview of unpublished CMS content | [Docs](https://nextjs.org/docs/app/api-reference/functions/draft-mode) |
27| `after` | Run code after response finishes streaming | [Docs](https://nextjs.org/docs/app/api-reference/functions/after) |
28| `connection` | Wait for connection before dynamic rendering | [Docs](https://nextjs.org/docs/app/api-reference/functions/connection) |
29| `userAgent` | Parse User-Agent header | [Docs](https://nextjs.org/docs/app/api-reference/functions/userAgent) |
30 
31## Generate Functions
32 
33| Function | Purpose | Reference |
34|----------|---------|-----------|
35| `generateStaticParams` | Pre-render dynamic routes at build time | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-static-params) |
36| `generateMetadata` | Dynamic metadata | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-metadata) |
37| `generateViewport` | Dynamic viewport config | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-viewport) |
38| `generateSitemaps` | Multiple sitemaps for large sites | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps) |
39| `generateImageMetadata` | Multiple OG images per route | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-image-metadata) |
40 
41## Request/Response
42 
43| Function | Purpose | Reference |
44|----------|---------|-----------|
45| `NextRequest` | Extended Request with helpers | [Docs](https://nextjs.org/docs/app/api-reference/functions/next-request) |
46| `NextResponse` | Extended Response with helpers | [Docs](https://nextjs.org/docs/app/api-reference/functions/next-response) |
47| `ImageResponse` | Generate OG images | [Docs](https://nextjs.org/docs/app/api-reference/functions/image-response) |
48 
49## Common Examples
50 
51### Navigation
52 
53Use `next/link` for internal navigation instead of `<a>` tags.
54 
55```tsx
56// Bad: Plain anchor tag
57<a href="/about">About</a>
58 
59// Good: Next.js Link
60import Link from 'next/link'
61 
62<Link href="/about">About</Link>
63```
64 
65Active link styling:
66 
67```tsx
68'use client'
69 
70import Link from 'next/link'
71import { usePathname } from 'next/navigation'
72 
73export function NavLink({ href, children }) {
74  const pathname = usePathname()
75 
76  return (
77    <Link href={href} className={pathname === href ? 'active' : ''}>
78      {children}
79    </Link>
80  )
81}
82```
83 
84### Static Generation
85 
86```tsx
87// app/blog/[slug]/page.tsx
88export async function generateStaticParams() {
89  const posts = await getPosts()
90  return posts.map((post) => ({ slug: post.slug }))
91}
92```
93 
94### After Response
95 
96```tsx
97import { after } from 'next/server'
98 
99export async function POST(request: Request) {
100  const data = await processRequest(request)
101 
102  after(async () => {
103    await logAnalytics(data)
104  })
105 
106  return Response.json({ success: true })
107}
108```
109