Afrexai Nextjs Production

# Next.js Production Engineering

> Complete methodology for building, optimizing, and operating production Next.js applications. From architecture decisions to deployment strategies — everything beyond "hello world."

## Quick Health Check (60 seconds)

Run through these 8 signals — score 0 (no) or 2 (yes):

| Signal | Check | Score |
|--------|-------|-------|
| 🏗️ Architecture | Server/Client Component boundary is intentional, not accidental | /2 |
| ⚡ Performance | Core Web Vitals all green (LCP <2.5s, INP <200ms, CLS <0.1) | /2 |
| 🔒 Security | No secrets in client bundles, CSP headers configured | /2 |
| 📦 Bundle | No unnecessary client JS, tree-shaking working | /2 |
| 🗄️ Data | Caching strategy defined (not just defaults) | /2 |
| 🧪 Testing | E2E + unit tests in CI, >70% coverage on critical paths | /2 |
| 🚀 Deploy | Preview deploys, rollback capability, monitoring | /2 |
| 📊 Observability | Error tracking, performance monitoring, structured logging | /2 |

**Score:** /16 → 14-16 Production-ready | 10-13 Needs work | <10 Risk zone

---

## Phase 1: Architecture Decisions

### App Router vs Pages Router Decision

**Default: App Router** for all new projects (Next.js 13.4+).

Use Pages Router ONLY if:
- Migrating existing Pages Router app (incremental adoption)
- Team has zero RSC experience AND shipping deadline <2 weeks
- Library dependency requires Pages Router patterns

### Project Structure (Recommended)

```
src/
├── app/                    # App Router — routes only
│   ├── (auth)/             # Route group — shared auth layout
│   │   ├── login/page.tsx
│   │   └── register/page.tsx
│   ├── (dashboard)/        # Route group — shared dashboard layout
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── settings/page.tsx
│   ├── api/                # Route Handlers (use sparingly)
│   │   └── webhooks/
│   │       └── stripe/route.ts
│   ├── layout.tsx          # Root layout
│   ├── loading.tsx         # Root loading
│   ├── error.tsx...

# Next.js Production Engineering

> Complete methodology for building, optimizing, and operating production Next.js applications — from architecture decisions to deployment strategies.

## What This Skill Does

Transforms your AI agent into a senior Next.js engineer who makes the right decisions about:

- **Server vs Client Components** — when to use each, where to draw the boundary
- **Data Fetching & Caching** — ISR, streaming, parallel fetches, tag-based revalidation
- **Server Actions** — validation, auth, authorization patterns
- **Performance** — Core Web Vitals optimization, bundle budgets, image/font optimization
- **Authentication** — middleware patterns, RBAC, security headers
- **Database** — ORM selection, connection pooling for serverless, Drizzle patterns
- **Testing** — Vitest + Playwright pyramid, Server Component testing
- **Deployment** — Docker production setup, CI/CD, platform comparison
- **Production patterns** — optimistic updates, infinite scroll, search with URL state

## Install

```bash
clawhub install afrexai-nextjs-production
```

## Quick Start

Ask your agent:
- "Set up a new Next.js project with the right architecture"
- "Add authentication with middleware"
- "Optimize my app's Core Web Vitals"
- "Deploy to production with Docker"
- "Audit my Next.js app"

## What Makes This Different

Most Next.js skills are API reference cards. This is a **production engineering methodology**:

- Decision matrices for every architectural choice
- Code patterns you can copy-paste into production
- Performance budgets with specific numbers
- Security hardening checklist
- Complete CI/CD pipeline configs
- Troubleshooting decision trees

## ⚡ Level Up

Want the complete SaaS context pack with customer acquisition, pricing strategy, and go-to-market playbooks alongside your Next.js stack?

**[AfrexAI SaaS Context Pack — $47](https://afrexai-cto.github.io/context-packs/)**

## 🔗 More Free Skills by AfrexAI

- `afrexai-vibe-coding` — AI-assisted develop...