PluginBench
Skill
Pass
Audit score 90

nextjs-app-router-patterns

wshobson/agents

Master Next.js 14+ App Router with Server Components, streaming, and advanced patterns.

SourceView on skills.sh

What is nextjs-app-router-patterns?

Comprehensive guide to Next.js 14+ App Router architecture, covering Server Components, rendering modes, file conventions, and full-stack React development. Use this when building new Next.js applications, migrating from Pages Router, or optimizing data fetching and caching strategies.

  • Implement Server Components and Client Components with proper boundaries
  • Set up rendering modes: Static, Dynamic, Streaming, and ISR (Incremental Static Regeneration)
  • Use file conventions (layout.tsx, loading.tsx, error.tsx, route.ts) for automatic UI patterns
  • Create parallel and intercepting routes for independent loading states
  • Fetch data server-side with caching and revalidation strategies
  • Build full-stack features with Server Actions for mutations

How to install nextjs-app-router-patterns

npx skills add https://github.com/wshobson/agents --skill nextjs-app-router-patterns
Claude Code
Cursor
Windsurf
Cline

How to use nextjs-app-router-patterns

  1. 1.Create your app directory structure following Next.js file conventions (layout.tsx, page.tsx, etc.)
  2. 2.Start with Server Components by default; add 'use client' only for interactive features
  3. 3.Implement data fetching in Server Components using async/await with caching headers
  4. 4.Add loading.tsx and error.tsx files for Suspense boundaries and error handling
  5. 5.Use Server Actions for mutations and form submissions with progressive enhancement
  6. 6.Configure revalidation strategies (ISR, on-demand) based on your data freshness needs

Use cases

Good for
  • Building a new Next.js 14+ application with App Router structure
  • Migrating an existing Pages Router application to App Router
  • Implementing progressive streaming for pages with slow data sources
  • Creating API endpoints and Server Actions for backend logic
  • Setting up authentication and authorization with Server Components
Who it's for
  • Full-stack React developers
  • Next.js application architects
  • Teams migrating from Pages Router
  • Developers optimizing React Server Component patterns
  • Backend-focused frontend engineers

nextjs-app-router-patterns FAQ

When should I use Server Components vs Client Components?

Start with Server Components by default for data fetching, heavy computation, and accessing secrets. Use Client Components only when you need interactivity (hooks like useState, useEffect) or browser APIs.

How do I handle loading states in App Router?

Create a loading.tsx file in your route directory to show loading UI while data is being fetched. This automatically wraps your page in a Suspense boundary.

What's the difference between static and dynamic rendering?

Static rendering happens at build time for content that rarely changes. Dynamic rendering happens at request time for personalized or real-time data. Use the next: { revalidate } option for ISR (Incremental Static Regeneration).

Can I use hooks in Server Components?

No. Hooks like useState and useEffect only work in Client Components. If you need interactivity, mark the component with 'use client' at the top.

How do I fetch data in the App Router?

Fetch directly in Server Components using async/await. Use the next: { revalidate } option to control caching. For Client Components, use Server Actions or external libraries like React Query.

Full instructions (SKILL.md)

Source of truth, from wshobson/agents.

name: nextjs-app-router-patterns description: 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.

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

ModeWhereWhen to Use
Server ComponentsServer onlyData fetching, heavy computation, secrets
Client ComponentsBrowserInteractivity, hooks, browser APIs
StaticBuild timeContent that rarely changes
DynamicRequest timePersonalized or real-time data
StreamingProgressiveLarge 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

Related skills

More from wshobson/agents and the wider catalog.

TA

tailwind-design-system

wshobson/agents

Build production-ready design systems with Tailwind CSS v4, design tokens, and component libraries.

52k installsAudited
TY

typescript-advanced-types

wshobson/agents

Master TypeScript's advanced type system: generics, conditional types, mapped types, and utility types for type-safe applications.

51k installsAudited
NO

nodejs-backend-patterns

wshobson/agents

Build production-ready Node.js backends with Express/Fastify, middleware patterns, auth, and database integration.

38k installsAudited
PY

python-performance-optimization

wshobson/agents

Profile and optimize Python code using cProfile, memory profilers, and performance best practices.

28k installsAudited
BR

brand-landingpage

wshobson/agents

Brand-first landing page designer with guided interviews and Stitch-powered iteration.

26k installsAudited
PY

python-testing-patterns

wshobson/agents

Implement comprehensive testing strategies with pytest, fixtures, mocking, and test-driven development.

26k installsAudited