Source profileQuality 79/100

wshobson/agents/plugins/frontend-mobile-development/skills/nextjs-app-router-patterns/SKILL.md

nextjs-app-router-patterns

Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.

Source repository stars: 38,313
Declared platforms: 0
Static risk flags: 2
Last source update: 2026-07-22
Source checked: 2026-07-28

Decision Compatibility Install Workflow Permissions Evidence Source

Decision brief

What it does—and where it fits

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

Best for

Building new Next.js applications with App Router
Migrating from Pages Router to App Router
Implementing Server Components and streaming

Not for

Tasks that require unconfirmed production actions or broad system permissions.
Environments where the pinned source and install steps cannot be inspected.

Compatibility matrix

Platform support, with evidence labels

Platform	Status	Evidence	What to check
Codex	Not declared	No explicit evidence	Portability before use
Claude Code	Not declared	No explicit evidence	Portability before use
Cursor	Not declared	No explicit evidence	Portability before use
Gemini CLI	Not declared	No explicit evidence	Portability before use

Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource

npx skills add https://github.com/wshobson/agents --skill "plugins/frontend-mobile-development/skills/nextjs-app-router-patterns"

Safe inspection promptEditorial

Inspect the Agent Skill "nextjs-app-router-patterns" from https://github.com/wshobson/agents/blob/c4b82b0ad771190355eb8e204b1329732a18449a/plugins/frontend-mobile-development/skills/nextjs-app-router-patterns/SKILL.md at commit c4b82b0ad771190355eb8e204b1329732a18449a. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

01
Quick Start
Review the “Quick Start” section in the pinned source before continuing.
Review and apply the “Quick Start” source section.
02
When to Use This Skill
Building new Next.js applications with App Router
Building new Next.js applications with App RouterMigrating from Pages Router to App RouterImplementing Server Components and streaming
03
Core Concepts
Review the “Core Concepts” section in the pinned source before continuing.
Review and apply the “Core Concepts” source section.
04
1. Rendering Modes
Review the “1. Rendering Modes” section in the pinned source before continuing.
Review and apply the “1. Rendering Modes” source section.

Permission review

Static risk signals and limitations

Network access

medium · line 71

The documentation includes network, browsing, or remote request actions.

const res = await fetch('https://api.example.com/products', {

Reads files

low · line 91

The documentation asks the agent to read local files, directories, or repositories.

Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient.

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial

Signal	Value	Evidence type	Meaning
Quality score	79/100	Computed	Documentation, specificity, maintenance, and trust rules
Repository stars	38,313	Source	Repository attention, not individual Skill quality
Compatibility	0 platforms	Source	Declared in the catalog source record
Usage guide	automated source guide	Editorial	Generated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository: wshobson/agents
Skill path: plugins/frontend-mobile-development/skills/nextjs-app-router-patterns/SKILL.md
Commit: c4b82b0ad771190355eb8e204b1329732a18449a
License: MIT
Collected: 2026-07-28
Default branch: main

View the original SKILL.md

Next.js App Router Patterns

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

When to Use This Skill

Building new Next.js applications with App Router
Migrating from Pages Router to App Router
Implementing Server Components and streaming
Setting up parallel and intercepting routes
Optimizing data fetching and caching
Building full-stack features with Server Actions

Core Concepts

1. Rendering Modes

Mode	Where	When to Use
Server Components	Server only	Data fetching, heavy computation, secrets
Client Components	Browser	Interactivity, hooks, browser APIs
Static	Build time	Content that rarely changes
Dynamic	Request time	Personalized or real-time data
Streaming	Progressive	Large pages, slow data sources

2. File Conventions

app/
├── layout.tsx       # Shared UI wrapper
├── page.tsx         # Route UI
├── loading.tsx      # Loading UI (Suspense)
├── error.tsx        # Error boundary
├── not-found.tsx    # 404 UI
├── route.ts         # API endpoint
├── template.tsx     # Re-mounted layout
├── default.tsx      # Parallel route fallback
└── opengraph-image.tsx  # OG image generation

Quick Start

// app/layout.tsx
import { Inter } from 'next/font/google'
import { Providers } from './providers'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: { default: 'My App', template: '%s | My App' },
  description: 'Built with Next.js App Router',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

// app/page.tsx - Server Component by default
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }, // ISR: revalidate every hour
  })
  return res.json()
}

export default async function HomePage() {
  const products = await getProducts()

  return (
    <main>
      <h1>Products</h1>
      <ProductGrid products={products} />
    </main>
  )
}

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

Best Practices

Do's

Start with Server Components - Add 'use client' only when needed
Colocate data fetching - Fetch data where it's used
Use Suspense boundaries - Enable streaming for slow data
Leverage parallel routes - Independent loading states
Use Server Actions - For mutations with progressive enhancement

Don'ts

Don't pass serializable data - Server → Client boundary limitations
Don't use hooks in Server Components - No useState, useEffect
Don't fetch in Client Components - Use Server Components or React Query
Don't over-nest layouts - Each layout adds to the component tree
Don't ignore loading states - Always provide loading.tsx or Suspense

Alternatives

Compare before choosing

Computed 95234,327

affaan-m/ECC

motion-advanced

Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations.

Computed 93234,327

affaan-m/ECC

react-performance

React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills). Organizes 70+ rules across 8 priority categories — waterfalls, bundle size, server-side, client fetching, re-render, rendering, JS micro-perf, advanced. Use when writing, reviewing, or refactoring React/Next.js code for performance.

Computed 90234,327

affaan-m/ECC

motion-patterns

Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs.

Computed 9037,126

github/awesome-copilot

markstream-install

Install and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, and Vue 2 applications. Use for package selection, minimal peer dependencies, CSS order, SSR boundaries, streaming mode, and renderer setup.