What problem does it solve? Building production Next.js applications involves many decisions—App Router vs Pages Router, server vs client components, caching strategies, and API integration—where mistakes lead to security leaks, poor performance, and broken rendering. This Skill provides a structured workflow and guardrails for creating, maintaining, and debugging Next.js features correctly. ## Core Features & Use Cases - Full-Stack Next.js Development: Implement pages, API routes, server components, layouts, and routing with TypeScript type safety. - Performance & SEO Optimization: Apply SSR, SSG, ISR caching strategies, Next.js Image optimization, code splitting, and metadata configuration. - Backend Integration: Connect to APIs using fetch, SWR, or React Query with proper error boundaries and loading states. - Use Case: You need a page that displays tasks from a FastAPI backend. The Skill generates a server component with typed data fetching, proper cache configuration, and Tailwind styling—plus a client component variant when interactivity is required. ## Quick Start Create a Next.js page that fetches and displays a list of tasks from my FastAPI backend with loading and error states.
