AEAl-Andalus⺢Experience
Sign in · Join
AEAl-Andalus⺢Experience
ProjectsGalleryAboutArticlesDashboardAPI
© 2026 — Modular content systems☕buy me a coffee
Framework Study Guide
ChaptersCardsLegendRoadmapRoute Map
Chapters
00 · Root Layout01 · Server Page (page.tsx)01a · Special Files (not-found, error, loading)02 · Client Component (UI & Interaction)02a · Client Boundaries & Islands03 · Entity Actions (actions/*.ts)04 · Server Actions ("use server")05 · Context Provider (context/*.tsx)06 · API Route (app/(api)/<entity>/route.ts)07 · TypeScript + Prisma08 · Entity-First Feature Design09 · Deployment, Docker & Cloud10 · Next 16 + Prisma 7 Upgrade11 · Prisma 7 (SQLite-first, App Router)12 · TypeORM (Entities + Migrations)13 · Drizzle ORM (SQL-first)11 · CSS, Mobile-First Flex, Tailwind12 · Libraries, Accelerators & Production Shortcuts14 · Next.js 16: cache, PPR, proxy, AI
→ cards/14-next16-patterns

Chapter

14 · Next.js 16: cache, PPR, proxy, AI

Next.js 16-specific features: use cache, Partial Prerendering, proxy.ts, and first-class AI agent support.

use cache — Granular Caching Directive

  • "use cache" is a per-function/component caching directive that replaces ad-hoc unstable_cache usage.
  • Cache tags are specified at the call site: revalidateTag("my-tag") busts only tagged entries.
  • Use for: expensive computations, stable DB queries, API responses that change infrequently.
  • Do NOT use for: user-specific data (sessions, profiles), real-time availability, mutation results.
  • Pattern: tag aggressively at granular scope; revalidate precisely.

PPR (Partial Prerendering)

  • PPR combines static + dynamic content in the same page — the shell is pre-rendered at build time, dynamic holes fill on request.
  • Enabled via next.config.ts and Suspense boundaries that mark dynamic regions.
  • Great for: marketing pages with live pricing, city pages with static hero + dynamic availability.
  • Co-locates naturally with the existing pattern: Server Page fetches static + dynamic data; Streaming Suspense for dynamic sections.

proxy.ts — Request Interception

  • proxy.ts replaces middleware.ts as the first interception point for every request.
  • Location: project root or src/proxy.ts alongside layout.tsx.
  • Use for: domain-based routing (multi-tenant), redirects, rewrite rules, shared response headers.
  • Do NOT use for: auth verification (use Server Actions), data fetch (use entity actions), Prisma (never from proxy).
  • Runs before rendering; keep it stateless, fast, and zero-config-dependent at request time.

AI Agent Integration — agents.md, MCP, DevTools

  • Next.js 16+ ships a bundled node_modules/next/agents.md with version-matched framework docs for AI tools.
  • Rule: before using a Next.js API (caching, server actions, route handlers), grep the installed agents.md for current conventions — never rely on training data for framework APIs.
  • MCP servers (Supabase, Prisma, Stripe) encode API surfaces + security policies into tool definitions — prefer them over raw codegen.
  • Browser log forwarding and DevTools MCP give AI agents runtime visibility into client errors.
  • The .next-dev.lock file prevents concurrent dev servers — always check for stale locks before npm run dev.

Quick Rules

  • Prefer "use cache" + tags over unstable_cache. Tag granularly; revalidate precisely.
  • PPR for hybrid static/dynamic pages: static shell + Suspense-bounded dynamic holes.
  • proxy.ts for routing/rewrites only — never auth or data fetch.
  • Check node_modules/next/agents.md for current API shapes before coding.
  • Prefer MCP tools over raw codegen for external services (DB, Stripe).