skill by

Next.js App Router Patterns

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.

Add skill

Follow @wshobson

Permissions

Files

SKILL.md

nextjs-app-router-patterns

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

2 files · 13 KB4 KB

Install

It’s free, and every skill you add syncs into every AI tool on your computer, instantly.

Get the Skillet appor

npx skilletmd add @wshobson/nextjs-app-router-patterns -y

Version history

Next.js App Router Patterns

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