Next.js App Router Patterns
FreeMaster Next.js 14+ architecture with comprehensive patterns.
Free · Opens the source repo
What Next.js App Router Patterns does
Next.js App Router Patterns provides a detailed guide for developers working with Next.js 14+ and its App Router feature. This skill focuses on modern full-stack React development, emphasizing the use of Server Components, streaming, and advanced data fetching techniques. It is particularly useful for those looking to build new applications or migrate existing ones from the Pages Router to the App Router framework.
The skill covers essential rendering modes, including Server and Client Components, as well as Static and Dynamic rendering. This flexibility allows developers to choose the appropriate rendering strategy based on their application's requirements. The provided file conventions outline the structure of a Next.js application, making it easier to implement best practices and maintain a clean codebase.
In addition to the core concepts, the skill offers a quick start guide with example code snippets to help developers get up and running quickly. It also includes best practices to follow and common pitfalls to avoid, ensuring that users can leverage the full capabilities of Next.js effectively.
This skill is aimed at developers who are familiar with React and are looking to deepen their understanding of Next.js, particularly in the context of building scalable and optimized web applications. Whether you are starting a new project or enhancing an existing one, this skill provides the necessary patterns and guidelines to succeed.
When to use it
Use this skill when starting new Next.js projects or migrating from the Pages Router to the App Router, especially when implementing Server Components and advanced routing features.
When not to use it
This skill may not be suitable for developers working with older versions of Next.js or those not utilizing the App Router feature.
What you can build with it
Starting a New Project
When beginning a new Next.js application, this skill provides the foundational patterns and practices needed to set up an efficient architecture.
Migrating to App Router
For developers transitioning from the Pages Router to the App Router, this skill offers guidance on best practices and implementation strategies.
Optimizing Existing Applications
Use this skill to enhance the performance of existing Next.js applications by implementing advanced data fetching and Server Components.
How to install Next.js App Router Patterns
View source1. Install with the skills CLI
npx skills add wshobson/agents/nextjs-app-router-patterns --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by wshobsonNext.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
Frequently asked questions about Next.js App Router Patterns
Similar skills
Playwright Component Testing
Test React and Vue components in isolation with Playwright.
Fluent UI Blazor
Integrate Fluent UI components in Blazor applications effortlessly.
Build MCP App
Create interactive UI widgets for MCP servers.
Web Design Reviewer
Identify and fix design issues in websites efficiently.
Markstream Install
Seamlessly integrate Markstream for Markdown rendering.
GSAP & Framer Scroll Animation
Create advanced scroll animations effortlessly.