skills.rest
MaiconGambini
MaiconGambiniCOMMUNITY
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 29, 2026
Search Tags:#react#data fetching#next.js#streaming#server actions#server components#app router
One-click install
npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill nextjs-app-router-patterns-maicongambini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router-patterns
Source: https://github.com/MaiconGambini/opencode-harness-guide/tree/main/skills/nextjs-app-router-patterns
Command: npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill nextjs-app-router-patterns-maicongambini

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building modern Next.js applications requires navigating complex decisions around Server vs Client Components, caching strategies, streaming, and routing conventions. This Skill provides concrete, production-tested patterns for the Next.js 14+ App Router so you avoid common architectural mistakes. ## Core Features & Use Cases - Server Components & Data Fetching: Patterns for async Server Components with fetch caching, ISR revalidation, and tag-based invalidation. - Advanced Routing: Parallel routes, intercepting routes for modals, route handlers for APIs, and file conventions like loading.tsx and error.tsx. - Server Actions & Mutations: Form handling, revalidation with revalidateTag/revalidatePath, and progressive enhancement. - Use Case: When migrating a Pages Router app to App Router, use this Skill to restructure data fetching into Server Components, add Suspense streaming boundaries, and implement Server Actions for mutations. ## Quick Start Ask the agent to scaffold a Next.js App Router product page with Server Components, streaming Suspense boundaries, and a Server Action for cart mutations.

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 in async Server Components using the fetch API with cache options. Use { next: { revalidate: 60 } } for ISR, { next: { tags: ['products'] } } for tag-based invalidation, or { cache: 'no-store' } for always-fresh data.

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

Move pages into the app/ directory using file conventions like page.tsx, layout.tsx, and loading.tsx. Convert getServerSideProps and getStaticProps into direct async data fetching inside Server Components, and add 'use client' only where interactivity is needed.

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

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.

Does Next.js App Router support streaming with Suspense?▼

Yes, App Router supports streaming by wrapping slow data-fetching components in Suspense boundaries with skeleton fallbacks. The page shell renders immediately while slow sections like reviews or recommendations stream in progressively.

Why can't I use hooks in Next.js Server Components?▼

Server Components render exclusively on the server, so React hooks like useState and useEffect that require a browser runtime are unavailable. Extract interactive parts into separate Client Components marked with 'use client'.

Related Skills

Explore More Software Engineering Skills→
AgentientAgentient
2

nextjs-project-scaffolding

Scaffold Next.js 14+ projects with strict TypeScript and src/app structure.

Official
Intermediate
bennie-ngbennie-ng

vercel-deployment

Configures environment variables and optimizes builds for deploying Next.js applications to Vercel.

Community
Intermediate
grasberggrasberg
3

fullstack-dev

Automate end-to-end full-stack workflows from UI to database persistence.

Community
Advanced
TylerbryyTylerbryy
1

react-next-modern

Enforce React 19 and Next.js App Router server-first patterns during code reviews and migrations.

Community
Advanced