Next.js Vercel Best Practices
Overview
Use only official Next.js and Vercel documentation as the source of truth. Convert documentation guidance into actionable code changes, review findings, and rollout checklists.
Workflow
- Identify context: Next.js version, App Router or Pages Router, deployment environment, runtime, and data store location.
- Select references by task:
| Task | Reference |
|---|---|
| Rendering strategy, caching, security, app performance | references/nextjs-official.md |
| Preview/production workflow, environment setup, deployment hardening | references/vercel-official.md |
| Full launch or production audit | Read both files |
- Produce guidance in this order:
- Critical reliability or security fixes first
- Performance and cost optimizations second
- Developer experience and maintainability improvements last
- Attach an official source URL to every non-trivial recommendation.
- End with a verification plan (
next build, preview deployment checks, promotion or rollback criteria).
Output Format
Findings: concrete risks or gaps in the current implementation.Recommended changes: minimal patch plan, ordered by impact.Performance plan: baseline metrics (LCP/INP/CLS/TTFB), suspected bottleneck, concrete fix, expected metric impact.Verification: how to confirm behavior in preview and production.Sources: direct official links used for each recommendation.
Guardrails
- Prefer official documentation over memory whenever there is ambiguity.
- Prefer Server Components and platform defaults before adding custom infrastructure.
- Keep secrets server-side and avoid client exposure of sensitive values.
- Use preview deployments for risky changes before production promotion.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.