Functions
Next.js function APIs.
Reference: https://nextjs.org/docs/app/api-reference/functions
Navigation Hooks (Client)
| Hook | Purpose | Reference |
|---|---|---|
useRouter | Programmatic navigation (push, replace, back, refresh) | Docs |
usePathname | Get current pathname | Docs |
useSearchParams | Read URL search parameters | Docs |
useParams | Access dynamic route parameters | Docs |
useSelectedLayoutSegment | Active child segment (one level) | Docs |
useSelectedLayoutSegments | All active segments below layout | Docs |
useLinkStatus | Check link prefetch status | Docs |
useReportWebVitals | Report Core Web Vitals metrics | Docs |
Server Functions
| Function | Purpose | Reference |
|---|---|---|
cookies | Read/write cookies | Docs |
headers | Read request headers | Docs |
draftMode | Enable preview of unpublished CMS content | Docs |
after | Run code after response finishes streaming | Docs |
connection | Wait for connection before dynamic rendering | Docs |
userAgent | Parse User-Agent header | Docs |
Generate Functions
| Function | Purpose | Reference |
|---|---|---|
generateStaticParams | Pre-render dynamic routes at build time | Docs |
generateMetadata | Dynamic metadata | Docs |
generateViewport | Dynamic viewport config | Docs |
generateSitemaps | Multiple sitemaps for large sites | Docs |
generateImageMetadata | Multiple OG images per route | Docs |
Request/Response
| Function | Purpose | Reference |
|---|---|---|
NextRequest | Extended Request with helpers | Docs |
NextResponse | Extended Response with helpers | Docs |
ImageResponse | Generate OG images | Docs |
Common Examples
Navigation
Use next/link for internal navigation instead of <a> tags.
// Bad: Plain anchor tag
<a href="/about">About</a>
// Good: Next.js Link
import Link from 'next/link'
<Link href="/about">About</Link>Active link styling:
'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
export function NavLink({ href, children }) {
const pathname = usePathname()
return (
<Link href={href} className={pathname === href ? 'active' : ''}>
{children}
</Link>
)
}Static Generation
// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
const posts = await getPosts()
return posts.map((post) => ({ slug: post.slug }))
}After Response
import { after } from 'next/server'
export async function POST(request: Request) {
const data = await processRequest(request)
after(async () => {
await logAnalytics(data)
})
return Response.json({ success: true })
}