---
title: Next.js Best Practices
type: agent/instruction
tags: [nextjs, react, ssr]
---

{{h1}}Next.js

{{h2}}Routing
- File-based routing in `app/` directory
- Dynamic routes: `[param]`
- Route groups: `(group)` for organisation
- Implement loading and error states

{{h2}}Data Fetching
- Server Components by default
- Fetch where needed
- `'use client'` only for interactivity
- Implement error boundaries

{{h2}}Server Components
- Default, no client JS
- Direct backend access
- Better performance and SEO
- Can't use hooks or browser APIs

{{h2}}Client Components
- Mark with `'use client'`
- Keep small and leaf-level
- Minimize client-side JS

{{h2}}Performance
- `next/image` for optimisation
- `next/font` for fonts
- Streaming and Suspense
- Lazy load heavy components

{{h2}}Metadata
- `metadata` export for SEO
- `generateMetadata` for async
- Include Open Graph tags

{{h2}}API Routes
- Route Handlers in `app/api/`
- Return `Response` objects
- Use middleware for auth

{{h2}}Patterns
- Server Actions for mutations
- Optimistic updates
- `revalidatePath`/`revalidateTag` for cache

{{h2}}Avoid
- Don't over-use `'use client'`
- Don't fetch in Client Components unnecessarily
- Don't skip error/loading states
