Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Next.js App Router Patterns — measured AI agent skill | DecimalAI

wshobson/nextjs-app-router-patterns

SkillScore100Maintained

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.

Frontendby wshobson

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

decimalai skills pull wshobson-nextjs-app-router-patterns

Get this skill — curl · raw file

curl -fsSL https://app.decimal.ai/s/wshobson-nextjs-app-router-patterns/SKILL.md

Raw file: /s/wshobson-nextjs-app-router-patterns/SKILL.md ↗ · machine-readable summary at /s/wshobson-nextjs-app-router-patterns.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

24 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 6h ago

Yes — +4% lift · at higher cost+39% tokens0% turns100% of whole cases pass with skill (24/24)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-06	✗→✓	▲ Improved	92%	0%
case-19	✓→✓	＝ Same ✓	11%	0%
case-01	✓→✓	＝ Same ✓	15%	0%
case-02	✓→✓	＝ Same ✓	27%	0%
case-03	✓→✓	＝ Same ✓	77%	0%

Showing 5 of 24 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

wshobson / agents

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

View on GitHub ↗

License MITImported 8/3/2026Version v1Bundled 1 file

Skill contents

references/

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

typescript
// 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

Want to see if wshobson/nextjs-app-router-patterns would activate on your phrasing? Try it before you install — no LLM call, no signup.

Other measured skills in the registry, with their headline benchmark lift.