skills.rest
Dhruv-Ghanchi
Dhruv-GhanchiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-app-router-patterns

Implements Next.js App Router patterns for Server Components, streaming, and data fetching.

Updated Jul 26, 2026
Search Tags:#caching#react#next.js#streaming#server actions#server components#app router
One-click install
npx skills add https://github.com/Dhruv-Ghanchi/Portfolio-Webiste --skill nextjs-app-router-patterns-dhruv-ghanchi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router-patterns
Source: https://github.com/Dhruv-Ghanchi/Portfolio-Webiste/tree/main/.agents/skills/nextjs-app-router-patterns
Command: npx skills add https://github.com/Dhruv-Ghanchi/Portfolio-Webiste --skill nextjs-app-router-patterns-dhruv-ghanchi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Developers building with Next.js 14+ often struggle to choose the right rendering mode, structure Server and Client Components correctly, and implement caching, streaming, and routing patterns without trial and error. ## Core Features & Use Cases - Rendering Architecture Guidance: Explains when to use Server Components, Client Components, static rendering, dynamic rendering, and streaming with concrete code examples. - Advanced Routing Patterns: Covers parallel routes, intercepting routes for modals, route handlers for APIs, and file conventions like loading.tsx and error.tsx. - Data Fetching and Mutations: Demonstrates Server Actions, tag-based cache invalidation with revalidateTag, ISR configuration, and dynamic metadata generation for SEO. - Use Case: When building a product dashboard, apply the parallel routes pattern to render analytics and team panels with independent loading states, then use Server Actions to handle mutations with automatic cache revalidation. ## Quick Start Ask the AI to scaffold a Next.js App Router page that fetches data in a Server Component with Suspense streaming and a Server Action for form submission.

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 fetch data in Next.js App Router Server Components?▼

Fetch data directly inside async Server Components using the fetch API with cache options. Use next: { revalidate: 60 } for ISR or next: { tags: ['products'] } for tag-based invalidation, and wrap slow sections in Suspense for streaming.

When should I use 'use client' in Next.js?▼

Add 'use client' only when a component needs interactivity, React hooks like useState or useEffect, or browser APIs. Start with Server Components by default and push client boundaries as far down the tree as possible.

How do Server Actions work in Next.js 14?▼

Server Actions are async functions marked with 'use server' that run on the server for mutations. They support progressive enhancement, can call revalidateTag or revalidatePath to update caches, and integrate with useTransition for pending states.

Can I use parallel routes for dashboard layouts in Next.js?▼

Yes, parallel routes use named slots like @analytics and @team that render simultaneously in the same layout. Each slot can have its own loading.tsx and error.tsx, giving independent loading and error states per panel.

Why is my Next.js fetch not revalidating cached data?▼

Cached fetches persist until revalidated by time or tag. Call revalidateTag or revalidatePath inside a Server Action after mutations, or use cache: 'no-store' for data that must always be fresh.

Related Skills

Explore More Software Engineering Skills→
RohithdgrrRohithdgrr

senior-frontend

Scaffolds, generates, and audits React and Next.js frontend projects with TypeScript and Tailwind CSS.

Community
Advanced
giosuetedeschi-specgiosuetedeschi-spec

vercel-deployment

Configure environment variables and runtimes for Next.js deployments on Vercel.

Community
Intermediate
Vivekmano27Vivekmano27

webapp-testing

Automate end-to-end web application testing with Playwright and Page Object Model.

Community
Advanced
rangojsrangojs

migrate-react-router

Migrate React Router v6/v7 and Remix v2 applications to the Rango RSC router.

Official
Advanced