Next.js implementation checklist
This checklist provides a technical verification framework for Next.js applications, ensuring stability, security, and performance before deploying to production environments like Vercel or self-hosted VPS.
Data Fetching and Caching
0/5Validate ISR Revalidation
criticalVerify that revalidatePath or revalidateTag is called within Server Actions following any data mutation to clear stale cache.
Audit Parallel Data Fetching
recommendedIdentify sequential 'await' calls in Server Components and replace them with Promise.all() or individual Suspense boundaries to prevent waterfalls.
Configure unstable_cache
recommendedWrap database queries (Prisma/Drizzle) in unstable_cache to ensure results are cached across requests rather than refetched on every render.
Set Default Fetch Cache Policies
criticalExplicitly set fetch('url', { cache: 'no-store' }) for real-time data or 'force-cache' for static assets to avoid default behavior ambiguity.
Implement Loading States
criticalEnsure every route segment has a loading.tsx file or manual Suspense boundary to prevent blank screens during async operations.
Security and Authentication
0/5Server Action Input Validation
criticalUse a schema library like Zod to parse and validate all arguments passed to 'use server' functions before processing.
Environment Variable Scoping
criticalAudit .env files to ensure sensitive keys (OpenAI, Stripe secret) are NOT prefixed with NEXT_PUBLIC_ to prevent browser exposure.
Middleware Session Verification
criticalImplement route protection in middleware.ts to redirect unauthenticated users before they hit Server Component rendering logic.
CSRF Protection for Actions
recommendedVerify that Server Actions check the Origin header against the host domain to prevent cross-site request forgery.
Auth.js/Clerk Server Checks
criticalVerify that session checks (auth() or getAuth()) are performed in the Server Component body, not just the client-side UI.
Performance and Core Web Vitals
0/5Image Optimization Audit
criticalEnsure next/image components have 'priority' set for LCP elements and utilize 'placeholder="blur"' for large hero images.
Font Subsetting
recommendedConfigure next/font to use specific subsets (e.g., 'latin') and swap display properties to minimize Layout Shift (CLS).
Bundle Analysis
recommendedRun @next/bundle-analyzer and move heavy client-side libraries (e.g., Lucide, Lodash) to Server Components or dynamic imports.
Script Loading Strategy
optionalReview third-party scripts in layout.tsx and assign 'strategy="lazyOnload"' or 'strategy="afterInteractive"' appropriately.
Route Segment Config
recommendedExplicitly define 'export const dynamic = "force-static"' for pages that do not require per-request data to optimize build-time generation.
SEO and Metadata
0/5Dynamic Metadata Implementation
criticalImplement generateMetadata() in dynamic routes ([id]) to populate unique titles and descriptions for search engine crawlers.
Sitemap and Robots Generation
criticalVerify that sitemap.ts and robots.ts files are present in the app directory and returning valid XML/text content.
Canonical URL Configuration
recommendedSet a base metadata URL in the root layout to ensure all generated canonical tags use the correct production domain.
Open Graph Image Validation
recommendedTest dynamic OG images using the Vercel OG library to ensure social shares display correct preview content.
Semantic HTML Audit
recommendedEnsure only one H1 exists per page and that the document structure follows a logical heading hierarchy (H2-H6).
AI and API Integration
0/5Stream Response Handling
recommendedVerify that AI SDK responses use 'StreamingTextResponse' and the frontend utilizes 'useChat' or 'useCompletion' for real-time UI updates.
Action Execution Timeout
criticalIncrease the 'maxDuration' config in route.ts or page.tsx for AI routes to prevent functions from timing out during long LLM generations.
Rate Limit Implementation
criticalApply middleware-based rate limiting using Upstash Redis to prevent AI API credit exhaustion from automated bots.
Edge Runtime Compatibility
optionalVerify that AI routes use 'export const runtime = "edge"' if they require minimal latency and support the Edge runtime environment.
Fallback UI for API Failures
recommendedImplement try/catch blocks in Server Actions that return user-friendly error messages when AI providers hit rate limits.
Error Handling and Monitoring
0/5Global Error Boundary
criticalCreate a root error.tsx file to catch unhandled exceptions and provide a 'reset' functionality to the user.
404 Not Found Handling
recommendedUse the notFound() function in dynamic segments and ensure a custom not-found.tsx is styled and functional.
Production Logging Integration
criticalConnect a service like Sentry or Axiom to capture server-side console errors that are otherwise invisible in production.
Health Check Endpoint
optionalCreate an /api/health route that checks database connectivity to allow external monitors to verify service uptime.
Source Map Verification
recommendedEnsure production builds generate source maps for error tracking but keep them restricted from public access.