AgentAlley

Skills · Coding

Next.js App Router Patterns

Unverified●28/40

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.

Originally by wshobson · MIT

Claude Code◐PartialHas SKILL.md but declares no allowed-tools — Claude Code will ask for permission each time
Cursor◐PartialPlain prose you can paste in — but no Cursor rules file
Codex◐PartialPlain prose you can paste in — but no AGENTS.md
Gemini CLI◐PartialPlain prose you can paste in
Copilot◐PartialPlain prose you can paste in — but no Copilot instructions file
npx agentalley add nextjs-app-router-patterns

This command does not work yet — the CLI is still being built. Until then, use Raw in the reader below to take the file.

Who is stuck, and on what

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.

The whole source

No sign-in, no blur, nothing truncated
nextjs-app-router-patterns/SKILL.md115 lines3.6 KBRawView on GitHub
Frontmatter — 2 properties
namenextjs-app-router-patterns
descriptionMaster 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.
1---
2name: nextjs-app-router-patterns
3description: 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.
4---A5 — No allowed-tools declared — no way to tell what this skill may touch
5 
6# Next.js App Router Patterns
7 
8Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
9 
10## When to Use This Skill
11 
12- Building new Next.js applications with App Router
13- Migrating from Pages Router to App Router
14- Implementing Server Components and streaming
15- Setting up parallel and intercepting routes
16- Optimizing data fetching and caching
17- Building full-stack features with Server Actions
18 
19## Core Concepts
20 
21### 1. Rendering Modes
22 
23| Mode | Where | When to Use |
24| --------------------- | ------------ | ----------------------------------------- |
25| **Server Components** | Server only | Data fetching, heavy computation, secrets |
26| **Client Components** | Browser | Interactivity, hooks, browser APIs |
27| **Static** | Build time | Content that rarely changes |
28| **Dynamic** | Request time | Personalized or real-time data |
29| **Streaming** | Progressive | Large pages, slow data sources |
30 
31### 2. File Conventions
32 
33```
34app/
35├── layout.tsx # Shared UI wrapper
36├── page.tsx # Route UI
37├── loading.tsx # Loading UI (Suspense)
38├── error.tsx # Error boundary
39├── not-found.tsx # 404 UI
40├── route.ts # API endpoint
41├── template.tsx # Re-mounted layout
42├── default.tsx # Parallel route fallback
43└── opengraph-image.tsx # OG image generation
44```
45 
46## Quick Start
47 
48```typescript
49// app/layout.tsx
50import { Inter } from 'next/font/google'
51import { Providers } from './providers'
52 
53const inter = Inter({ subsets: ['latin'] })
54 
55export const metadata = {
56 title: { default: 'My App', template: '%s | My App' },
57 description: 'Built with Next.js App Router',
58}
59 
60export default function RootLayout({
61 children,
62}: {
63 children: React.ReactNode
64}) {
65 return (
66 <html lang="en" suppressHydrationWarning>
67 <body className={inter.className}>
68 <Providers>{children}</Providers>
69 </body>
70 </html>
71 )
72}
73 
74// app/page.tsx - Server Component by default
75async function getProducts() {
76 const res = await fetch('https://api.example.com/products', {A4 — This skill pulls in web or user content but never says to treat that content as data. A signal, not proof.
77 next: { revalidate: 3600 }, // ISR: revalidate every hour
78 })
79 return res.json()
80}
81 
82export default async function HomePage() {
83 const products = await getProducts()
84 
85 return (
86 <main>
87 <h1>Products</h1>
88 <ProductGrid products={products} />
89 </main>
90 )
91}
92```
93 
94## Detailed patterns and worked examples
95 
96Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient.
97 
98## Best Practices
99 
100### Do's
101 
102- **Start with Server Components** - Add 'use client' only when needed
103- **Colocate data fetching** - Fetch data where it's used
104- **Use Suspense boundaries** - Enable streaming for slow data
105- **Leverage parallel routes** - Independent loading states
106- **Use Server Actions** - For mutations with progressive enhancement
107 
108### Don'ts
109 
110- **Don't pass serializable data** - Server → Client boundary limitations
111- **Don't use hooks in Server Components** - No useState, useEffect
112- **Don't fetch in Client Components** - Use Server Components or React Query
113- **Don't over-nest layouts** - Each layout adds to the component tree
114- **Don't ignore loading states** - Always provide loading.tsx or Suspense
115 

Reviews

Installed this one?Write the first review and take the Trailblazer badge.

Reviews only open after a real install, so this is empty — and we leave it empty rather than invent one.

Alternatives

Also in Coding
Subagent Driven DevelopmentUse when executing implementation plans with independent tasks in the current sessionCoding · MIT◐◐◐◐◐●36/40Python Code Style & DocumentationPython code style, linting, formatting, naming conventions, and documentation standards. Use when writing new code, reviewing style, configuring linters, writing docstrings, or establishing project standards.Coding · MIT◐····●35/40Competitor Price Analysis 💲Competitor pricing strategy analysis and market positioning. Price mapping, pricing gaps identification, elasticity signals evaluation, and strategic pricing optimization. Use when the user asks about competitor pricing, price analysis, pricing strategy, or coCoding · MIT◐····●34/40Competitor Price Tracker 📊Set up competitor price tracking and monitoring workflows. Track price changes, detect promotions, analyze pricing patterns, and get alerts for competitive price movements.Coding · MIT◐····●34/40