nextjs-app-router-patterns

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

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.

Software EngineeringNo license★ 39156⑂ 4179commit 38e19c2

Install skillView source on GitHub

What this skill does

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

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/nextjs-app-router-patterns · pinned to the source commit

# Run from your project root
git clone https://github.com/wshobson/agents.git .skillboard-tmp
git -C .skillboard-tmp checkout 38e19c20d2b154510b0e624a2e3e186b19b5c527
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/frontend-mobile-development/skills/nextjs-app-router-patterns" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/wshobson/agents.git .skillboard-tmp
git -C .skillboard-tmp checkout 38e19c20d2b154510b0e624a2e3e186b19b5c527
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/frontend-mobile-development/skills/nextjs-app-router-patterns" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/nextjs-app-router-patterns

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so nextjs-app-router-patterns is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 38e19c20d2b1. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

nextjs-app-router-patterns

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

Software EngineeringNo license★ 39156⑂ 4179commit 38e19c2

Install skillView source on GitHub

What this skill does

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

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

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/nextjs-app-router-patterns · pinned to the source commit

# Run from your project root
git clone https://github.com/wshobson/agents.git .skillboard-tmp
git -C .skillboard-tmp checkout 38e19c20d2b154510b0e624a2e3e186b19b5c527
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/frontend-mobile-development/skills/nextjs-app-router-patterns" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/wshobson/agents.git .skillboard-tmp
git -C .skillboard-tmp checkout 38e19c20d2b154510b0e624a2e3e186b19b5c527
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/frontend-mobile-development/skills/nextjs-app-router-patterns" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/nextjs-app-router-patterns

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so nextjs-app-router-patterns is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 38e19c20d2b1. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

nextjs-app-router-patterns

What this skill does

Next.js App Router Patterns

When to Use This Skill

Core Concepts

1. Rendering Modes

2. File Conventions

Quick Start

Detailed patterns and worked examples

Best Practices

Do's

Don'ts

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

nextjs-app-router-patterns

What this skill does

Next.js App Router Patterns

When to Use This Skill

Core Concepts

1. Rendering Modes

2. File Conventions

Quick Start

Detailed patterns and worked examples

Best Practices

Do's

Don'ts

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits