nextjs-app-router-patterns
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
About this skill
This skill equips an AI agent with an in-depth understanding of current best practices and architectural patterns for Next.js 14+ development, specifically focusing on the App Router. It guides the agent in effectively utilizing core Next.js features such as Server Components, streaming, parallel routes, intercepting routes, optimized data fetching, caching strategies, and Server Actions for full-stack functionality. By leveraging this skill, an AI agent can generate robust, performant, and maintainable Next.js code, provide architectural advice, and assist in migrating existing projects to the App Router paradigm, ensuring adherence to modern full-stack React development standards.
Best use case
To guide AI agents in generating, analyzing, or refactoring Next.js applications and code, ensuring alignment with modern App Router patterns, Server Components, and full-stack React best practices.
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
AI-generated Next.js code, architectural recommendations, or development advice that is highly optimized, follows modern App Router best practices, leverages Server Components effectively, and ensures a performant and scalable full-stack React application.
Practical example
Example input
Design a new Next.js 14 application using the App Router for an e-commerce platform. Focus on implementing product listings with server components, a shopping cart with client components, and user authentication with server actions.
Example output
Based on the requirements for an e-commerce platform using Next.js 14 App Router:
**1. Project Structure:**
- `app/layout.tsx`: Root layout for global UI.
- `app/(shop)/products/[category]/page.tsx`: Server Component for product listings.
- `app/(shop)/cart/page.tsx`: Client Component for the shopping cart.
- `app/(auth)/login/page.tsx`, `app/(auth)/signup/page.tsx`: Client components for UI, interacting with Server Actions.
**2. Product Listings (Server Component):**
`app/(shop)/products/[category]/page.tsx`
```typescript
import { getProductsByCategory } from '@/lib/data'; // Async function for data fetching
export default async function ProductsPage({ params }: { params: { category: string } }) {
const products = await getProductsByCategory(params.category); // Data fetched on the server
return (
<main>
<h1>{params.category.toUpperCase()} Products</h1>
<ul className="grid grid-cols-3 gap-4">
{products.map(product => (
<li key={product.id} className="border p-4">
<h2>{product.name}</h2>
<p>${product.price}</p>
{/* Add to Cart button would be a Client Component imported here */}
</li>
))}
</ul>
</main>
);
}
```
**3. Shopping Cart (Client Component):**
`app/(shop)/cart/page.tsx` (or a component imported into it)
```typescript
'use client';
import { useState, useEffect } from 'react';
// ... logic for client-side state management, e.g., using a global context or local storage
export default function CartPage() {
const [cartItems, setCartItems] = useState([]);
// ... fetch cart from local storage or user session (client-side)
return (
<div>
<h1>Your Shopping Cart</h1>
{/* Display cart items, quantity controls, etc. */}
<button onClick={() => alert('Proceed to checkout!')}>Checkout</button>
</div>
);
}
```
**4. User Authentication (Server Actions):**
`app/(auth)/login/page.tsx` (Client component form)
```typescript
'use client';
import { authenticateUser } from '@/lib/actions'; // Server Action
export default function LoginPage() {
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const result = await authenticateUser(formData); // Call Server Action
if (result?.error) {
alert(result.error);
} else {
window.location.href = '/dashboard'; // Redirect on success
}
};
return (
<form onSubmit={handleSubmit}>
<input type="email" name="email" placeholder="Email" required />
<input type="password" name="password" placeholder="Password" required />
<button type="submit">Login</button>
</form>
);
}
```
`lib/actions.ts` (Server Actions file)
```typescript
'use server';
import { signIn } from '@/auth'; // Assuming NextAuth.js or similar
import { AuthError } from 'next-auth';
export async function authenticateUser(formData: FormData) {
try {
await signIn('credentials', formData);
} catch (error) {
if (error instanceof AuthError) {
switch (error.type) {
case 'CredentialsSignin':
return { error: 'Invalid credentials.' };
default:
return { error: 'Something went wrong.' };
}
}
throw error;
}
}
```
This setup leverages Server Components for initial product rendering and SEO, Client Components for interactive elements like the cart, and Server Actions for secure and efficient form submissions like authentication.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
When not to use this skill
- The task is unrelated to Next.js App Router patterns.
- You need a different web framework or a different version of Next.js that does not primarily use the App Router.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/nextjs-app-router-patterns/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How nextjs-app-router-patterns Compares
| Feature / Agent | nextjs-app-router-patterns | Standard Approach |
|---|---|---|
| Platform Support | Claude | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | easy | N/A |
Frequently Asked Questions
What does this skill do?
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
Which AI agents support this skill?
This skill is designed for Claude.
How difficult is it to install?
The installation complexity is rated as easy. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# Next.js App Router Patterns Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development. ## Use this skill when - 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 ## Do not use this skill when - The task is unrelated to next.js app router patterns - You need a different domain or tool outside this scope ## Instructions - Clarify goals, constraints, and required inputs. - Apply relevant best practices and validate outcomes. - Provide actionable steps and verification. - If detailed examples are required, open `resources/implementation-playbook.md`. ## Resources - `resources/implementation-playbook.md` for detailed patterns and examples.
Related Skills
n8n-workflow-patterns
Proven architectural patterns for building n8n workflows.
memory-safety-patterns
Cross-language patterns for memory-safe programming including RAII, ownership, smart pointers, and resource management.
linkerd-patterns
Production patterns for Linkerd service mesh - the lightweight, security-first service mesh for Kubernetes.
hig-patterns
Apple Human Interface Guidelines interaction and UX patterns.
fastapi-router-py
Create FastAPI routers following established patterns with proper authentication, response models, and HTTP status codes.
dotnet-backend-patterns
Master C#/.NET patterns for building production-grade APIs, MCP servers, and enterprise backends with modern best practices (2024/2025).
ddd-tactical-patterns
Apply DDD tactical patterns in code using entities, value objects, aggregates, repositories, and domain events with explicit invariants.
cdk-patterns
Common AWS CDK patterns and constructs for building cloud infrastructure with TypeScript, Python, or Java. Use when designing reusable CDK stacks and L3 constructs.
cc-skill-frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
cc-skill-backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
bats-testing-patterns
Master Bash Automated Testing System (Bats) for comprehensive shell script testing. Use when writing tests for shell scripts, CI/CD pipelines, or requiring test-driven development of shell utilities.
nft-standards
Master ERC-721 and ERC-1155 NFT standards, metadata best practices, and advanced NFT features.