skills.rest
kyamsSRL
kyamsSRLCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-app-router-patterns

Implement Next.js 14+ App Router patterns with Server Components and Suspense streaming.

Updated Mar 18, 2026
Search Tags:#streaming#nextjs#app-router#server-components#data-fetching#server-actions#parallel-routes
One-click install
npx skills add https://github.com/kyamsSRL/TinyCopro --skill nextjs-app-router-patterns-kyamssrl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router-patterns
Source: https://github.com/kyamsSRL/TinyCopro/tree/main/.claude/skills/nextjs-app-router-patterns
Command: npx skills add https://github.com/kyamsSRL/TinyCopro --skill nextjs-app-router-patterns-kyamssrl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modern Next.js applications require coordinating server and client components, streaming, parallel and intercepting routes, advanced data fetching, and cache invalidation patterns; this Skill condenses those complexities into practical, actionable patterns so teams can build performant, maintainable App Router apps and migrate from the Pages Router with confidence.

Core Features & Use Cases

  • Rendering & File Conventions: Clear guidance on when to use Server Components, Client Components, layouts, pages, loading, error, and template files to structure routes.
  • Data Fetching & Caching: Patterns for ISR, tag-based invalidation, revalidate options, and colocated fetching to optimize performance and cache consistency.
  • Streaming & Suspense: Techniques for progressive hydration using Suspense boundaries to stream slow data like reviews or recommendations.
  • Routing Patterns: Examples for parallel routes, intercepting/modal routes, and route handlers (API endpoints) to build complex UIs such as dashboards and modals.
  • Server Actions & Best Practices: Server Action examples for mutations with revalidation and redirect logic, plus do's and don'ts to avoid common pitfalls.
  • Use Case: Build an e-commerce product page that renders core product content immediately, streams reviews and recommendations, supports add-to-cart Server Actions, and uses tag-based caching to invalidate product lists.

Quick Start

Use the nextjs-app-router-patterns skill to generate an App Router layout with server components, Suspense boundaries for streaming, route handlers for products, and tag-based caching strategies.

Frequently Asked Questions about nextjs-app-router-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement streaming with Suspense in Next.js App Router?▼

Streaming in the Next.js App Router is implemented using Suspense boundaries to progressively hydrate slow data components, allowing core content to render immediately while data like reviews load asynchronously. This technique optimizes component-level rendering and perceived performance.

What are parallel and intercepting routes in Next.js and when should I use them?▼

Parallel and intercepting routes are Next.js App Router conventions for rendering multiple pages simultaneously in slots and intercepting navigation to display modals. They are essential for building complex UIs such as dashboards and nested modals without losing context.

How do I migrate from Next.js Pages Router to App Router architecture?▼

Migrating to the App Router involves adopting new file conventions for layouts and pages, converting data fetching to colocated server components, and replacing API routes with route handlers. This transition enables advanced Server Actions, SSR/SSG, and improved caching strategies.

How do I use Server Actions for data mutations and cache invalidation in Next.js?▼

Server Actions in Next.js handle data mutations by executing server-side code directly from components. After mutation, you use tag-based invalidation and revalidation options to update cached data and redirect users to reflect the latest application state securely.

What is the best way to handle data fetching and caching in Next.js Server Components?▼

The best way to handle data fetching in Server Components is using colocated fetching with built-in cache options. You can leverage Incremental Static Regeneration (ISR) and tag-based cache invalidation to ensure optimal performance and cache consistency across your application.

Can I use route handlers to build API endpoints in a Next.js App Router application?▼

Yes, you can use route handlers within the App Router to build API endpoints. They provide a standard mechanism to handle requests and serve data, replacing the older API routes structure while integrating seamlessly with your server component architecture.

Related Skills

Explore More Software Engineering Skills→
sarimofficialsarimofficial

Next.js Development Skill

Designs, implements and optimizes Next.js 16+ apps with TypeScript, Tailwind CSS and App Router.

Community
Intermediate
mauriciodelriomauriciodelrio
3

rendering-strategies

Select and apply rendering strategies for React and Next.js applications.

Community
Advanced
Solace-StephaneSolace-Stephane

nextjs-expert

Provide expert guidance for building Next.js 14/15 applications with the App Router.

Community
Advanced
gil00pitagil00pita

astro

Build content-focused websites using islands architecture with Astro.

Community
Advanced