Source from repo

Next.js App Router Patterns

Collection of 146 agent skills across 72 plugins for full-stack development, orchestration, and automation.

wshobsonGitHub wshobsonSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

13.3 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

SKILL.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown115 linesEntrypointFree

SKILL.md

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---
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', {
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

Marketplace

Source from repo

Next.js App Router Patterns

Collection of 146 agent skills across 72 plugins for full-stack development, orchestration, and automation.

wshobsonGitHub wshobsonSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

13.3 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

SKILL.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown115 linesEntrypointFree

SKILL.md

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---
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', {
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

Next.js App Router Patterns

SKILL.md

Preparing the source view

Next.js App Router Patterns

SKILL.md