# Nextjs

> Next.js 15 (App Router) PUDO Checklist

- Skill: `dongduong2001/nextjs` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dongduong2001/nextjs`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dongduong2001/nextjs/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: DongDuong2001 (https://skillmd.com/u/dongduong2001)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dongduong2001/nextjs

---

# Next.js 15 (App Router) PUDO Checklist

## 1. PLAN (Architecture & Strategy)
- [ ] **Rendering Strategy:** Define which routes will be Server Components (RSC) and which require Client Components (`use client`).
- [ ] **Data Fetching:** Plan caching strategies using Next.js 15's native `fetch` overrides and `React.cache`.
- [ ] **Routing Tree:** Map out nested layouts, `loading.tsx`, `error.tsx`, and `not-found.tsx` boundaries.
- [ ] **Mutations:** Plan Server Actions for data mutations instead of traditional API routes where possible.

## 2. UNDERSTAND (Context & Auditing)
- [ ] **RSC Boundary:** Ensure `use client` directives are pushed as far down the component tree as possible.
- [ ] **Bundle Analysis:** Audit third-party packages to ensure they are compatible with Server Components.
- [ ] **State Management:** Review where global state (Zustand, Redux) is truly needed versus URL state or server state.

## 3. DEVELOP (Implementation)
- [ ] **Components:** Build Server Components by default. Extract interactivity (hooks, events) into minimal Client Components.
- [ ] **Forms & Mutations:** Use React 19 hooks (`useActionState`, `useFormStatus`) combined with Server Actions.
- [ ] **Streaming:** Wrap slow data-fetching components in `<Suspense>` to stream HTML to the client progressively.
- [ ] **Assets:** Utilize `<Image>`, `<Link>`, and `next/font` for automatic asset optimization.

## 4. OPTIMIZE (Performance & Review)
- [ ] **Caching:** Verify Data Cache, Full Route Cache, and Router Cache behaviors. Configure `revalidate` tags correctly.
- [ ] **SEO & Metadata:** Implement dynamic `generateMetadata` for accurate Open Graph and SEO tags.
- [ ] **Web Vitals:** Check LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift) metrics.
- [ ] **Edge Compatibility:** Ensure middleware and essential handlers are Edge-runtime compatible if deploying to Vercel/similar.