nextjs-development_skill

Overview

This skill teaches practical Next.js development with the App Router and Server Components, covering data fetching, routing patterns, API route handlers, middleware, and full‑stack workflows. It focuses on buildable patterns for SSR, ISR, edge functions, and mixed client/server UIs to ship production-ready React applications. The guidance is concise and example-driven so you can apply patterns immediately.

How this skill works

The skill explains how Next.js App Router structures applications in the app/ directory and how Server Components render on the server by default. It shows data fetching strategies (static, dynamic, ISR, parallel and sequential fetching), routing (dynamic, catch‑all, route groups, parallel and intercepting routes), layouts, loading and error UI, API route handlers, and middleware for request-level logic. Each concept includes minimal examples and clear recommendations for when to use each pattern.

When to use it

• Building full‑stack React applications with server rendering and client interactivity
• Creating static sites with incremental static regeneration and cached fetches
• Designing complex routing: dynamic routes, catch‑all, route groups, and intercepting flows
• Implementing API endpoints, protected routes, and serverless CRUD handlers
• Optimizing SEO, metadata, and image/font performance for production
• Deploying edge functions and middleware for auth, redirects, and request transforms

Best practices

• Prefer Server Components for data‑heavy UI and move interactivity to 'use client' client components only when needed
• Use fetch cache options: force-cache for static content, no-store for per‑request data, next.revalidate for ISR
• Generate static params for dynamic routes when possible to improve build-time performance
• Keep layouts nested to preserve state across navigations and isolate page-level templates
• Use loading.tsx and Suspense for progressive rendering and error.tsx for robust error boundaries
• Keep API route handlers small and stateless; validate inputs and return proper HTTP statuses

Example use cases

• E-commerce storefront: server‑rendered product pages, ISR for inventory updates, API routes for cart and orders
• Content site or blog: generateStaticParams for posts, image optimization, Open Graph metadata
• Admin dashboard: Server Components for data aggregation and client components for interactive controls
• Public API with CORS: route handlers that expose search and pagination with OPTIONS support
• Edge middleware for auth and country-based redirects before route handlers