nextjs-data-fetching

What problem does it solve?

This skill provides a complete Next.js data-fetching system that coordinates server and client data loading across app routes, API routes, and components, reducing boilerplate and complexity.

Core Features & Use Cases

• Server Components Data Fetching: fetch data in server components with built-in caching and error handling.
• Parallel & Sequential Fetching: orchestrate multiple requests efficiently using Promise.all and sequential flows.
• Streaming with Suspense: progressively render data using Suspense boundaries for better UX.
• Route Handlers (API routes): create API endpoints tied to Next.js routing.
• Client-side Fetching: integrate SWR or TanStack Query for dynamic UI updates.
• Static Generation & Revalidation: leverage generateStaticParams, ISR, and revalidation strategies.
• Error Handling & Validation: consistent error boundaries and type-safe responses.

Quick Start

Use the Next.js data-fetching skill to set up a sample app demonstrating server components data fetching, parallel and sequential requests, streaming with Suspense, API route handlers, and client-side fetching with SWR or TanStack Query.