# Nextjs Patterns
> Next.js App Router conventions — file structure, Server Actions, Route Handlers, Metadata API, Image and Font optimization
- Skill: `nadav011/nextjs-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nadav011/nextjs-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nadav011/nextjs-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Nadav011 (https://skillmd.com/u/nadav011)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nadav011/nextjs-patterns
---
# Next.js App Router Patterns
---
## File Conventions
| File | Purpose |
|------|---------|
| `page.tsx` | Route UI, receives `params`/`searchParams` |
| `layout.tsx` | Shared UI, wraps children, persists across nav |
| `loading.tsx` | Suspense fallback for the segment |
| `error.tsx` | Error boundary — must be `'use client'` |
| `not-found.tsx` | 404 UI — call `notFound()` to trigger |
| `route.ts` | API endpoint (`GET`, `POST`, etc.) |
---
## Server Actions
```typescript
// ✅ CORRECT
"use server"
import { z } from "zod"
const schema = z.object({ name: z.string().min(1) })
export async function updateName(formData: FormData) {
const result = schema.safeParse({ name: formData.get("name") })
if (!result.success) {
return { success: false, error: result.error.flatten().fieldErrors }
}
await db.update(result.data)
revalidatePath("/profile")
return { success: true }
}
// ❌ WRONG
export async function updateName(formData: FormData) {
await db.update({ name: formData.get("name") as string })
}
```
**Rules:** Always `"use server"` · Always Zod validate · Always `{success, error}` shape · Never return sensitive data
---
## Route Handlers
```typescript
// ✅ CORRECT
export async function POST(req: NextRequest) {
try {
const { email } = bodySchema.parse(await req.json())
await subscribe(email)
return NextResponse.json({ success: true })
} catch (err) {
if (err instanceof z.ZodError) {
return NextResponse.json({ error: err.flatten() }, { status: 400 })
}
return NextResponse.json({ error: "Internal error" }, { status: 500 })
}
}
```
---
## Image Optimization
```tsx
// ✅ CORRECT — always next/image
import Image from "next/image"
// ❌ WRONG
```
`priority` on above-the-fold images (improves LCP). Always `width` + `height` to prevent CLS.
---
## Font Optimization
```tsx
// ✅ CORRECT — no FOUT, self-hosted, no privacy leak
import { Inter } from "next/font/google"
const inter = Inter({ subsets: ["latin"], display: "swap" })
```
---
## `use client` Boundary Rules
```tsx
// ✅ Push to leaf components only
// page.tsx — Server Component
export default async function Page() {
const data = await db.query()
return
}
// LikeButton.tsx
"use client"
export function LikeButton() {
const [liked, setLiked] = useState(false)
return
}
// ❌ WRONG — entire page becomes client
"use client"
export default function Page() { ... }
```
---
## Common Mistakes
| Mistake | Fix |
|---------|-----|
| `useState` in Server Component | Add `"use client"` or move to child |
| `router.push()` in Server Action | Use `redirect()` from `next/navigation` |
| `searchParams` in layout | Only available in `page.tsx` |
| `new Response()` from route | Use `NextResponse.json()` |
| `![]()
` for content images | Use `next/image` always |