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: 39,130
Declared platforms: 0
Static risk flags: 2
Last source update: 2026-08-24
Source checked: 2026-08-26

Decision Compatibility Install Workflow Permissions Evidence Source FAQ

Decision brief

What it does: 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/d82998e7df393c671ede2387a8435075f0b633f5/plugins/frontend-mobile-development/skills/nextjs-app-router-patterns/SKILL.md at commit d82998e7df393c671ede2387a8435075f0b633f5. 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	39,130	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: d82998e7df393c671ede2387a8435075f0b633f5
License: MIT
Collected: 2026-08-26
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

Frequently asked questions

What to verify before installation and use

What does the nextjs-app-router-patterns source document cover?

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

How do I install nextjs-app-router-patterns?

The source record exposes this install command: npx skills add https://github.com/wshobson/agents --skill "plugins/frontend-mobile-development/skills/nextjs-app-router-patterns". Inspect the command and pinned source before running it.

Which permission-related actions were detected?

Static rules flagged network, read-files in the source; the page lists the matching lines and excerpts.

Alternatives

Compare before choosing

Computed 962,548

supabase/agent-skills

supabase

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, declarative schemas, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector); deb

Computed 961,105

fcakyon/claude-codex-settings

vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view

Computed 96224

yonatangross/orchestkit

json-render-catalog

json-render component catalog patterns for AI-safe generative UI. Define Zod-typed catalogs that constrain what AI can generate, use @json-render/shadcn for 36 pre-built components, optimize specs with YAML mode, and apply the three edit modes (patch/merge/diff) for progressive updates. Use when building AI-generated UIs, defining component catalogs, or integrating json-render into React/Vue/Svelte/React Native/Ink/Next.js projects.

Computed 96224

yonatangross/orchestkit

react-server-components-framework

Use when building Next.js 16+ apps with React Server Components. Covers App Router, Cache Components (replacing experimental_ppr), streaming SSR, Server Actions, and React 19 patterns for server-first architecture.