Next.js
Next.js App Router patterns including server actions, middleware, and API route handlers.
20 snippets
Showing 20 of 20 snippets
Type-Safe API Route Handler
Next.js App Router route handler with input validation, typed responses, and proper error handling.
Authentication Middleware Guard
Next.js middleware that checks auth tokens on protected routes and redirects unauthenticated users to login.
Server Action with Form Validation
Next.js Server Action handling form submissions with validation, error messages, and redirect on success.
Dynamic OG Image Generation
Generate Open Graph images on-the-fly using Next.js ImageResponse with custom fonts and dynamic content.
Edge Middleware Geolocation
Use Vercel Edge geolocation headers to personalize content based on the visitor's country and city.
On-Demand ISR Revalidation
Trigger incremental static regeneration via API route with secret token validation for instant cache purge.
Protected Page with Server Redirect
Server Component that checks auth status and redirects unauthenticated users before rendering any content.
Reusable Metadata Factory
Factory function to generate consistent SEO metadata across all pages with Open Graph and canonical URLs.
Streaming API Response
Stream long-running API responses using ReadableStream and TransformStream for real-time data delivery.
Parallel Routes Layout
Next.js parallel routes pattern to render multiple page slots simultaneously in a shared layout.
Edge Middleware Rate Limiter
Rate limit API requests at the edge using a sliding window counter with configurable thresholds.
Cached Fetch with Revalidation
Fetch external data in Server Components with time-based revalidation and error boundaries.
NextAuth Session Check Pattern
Check authentication status in Server Components and redirect unauthorized users with NextAuth.js.
Next.js Image Optimization Patterns
Use next/image with responsive sizes, blur placeholders, and priority loading for optimal Core Web Vitals.
Environment Variable Validation
Validate required environment variables at build time with type-safe access and descriptive errors.
Redirect Matrix in next.config
Define URL redirect rules in next.config.ts for SEO migration, vanity URLs, and path normalization.
Partial Prerendering with Suspense
Combine static shells with streamed dynamic content using React Suspense for instant page loads.
Server Action with Revalidation
Mutate data with Server Actions and revalidate cached paths or tags for instant UI updates.
Intercepting Routes Modal
Show content in a modal on soft navigation while preserving the full page on hard navigation.
Multi-Zone Application Setup
Compose multiple Next.js apps under one domain using rewrites for micro-frontend architecture.