nextjs-app-router
Next.js 15 App Router patterns for this project. Use when creating routes, API endpoints, server components, or client components.
When & Why to Use This Skill
This Claude skill provides standardized patterns and boilerplate for Next.js 15 App Router development. It streamlines the creation of routes, API endpoints, and both Server and Client components, ensuring adherence to the latest framework best practices, directory structures, and performance optimization techniques like caching and metadata management.
Use Cases
- Rapidly scaffolding new routes and API handlers using the Next.js 15 directory structure.
- Implementing efficient data fetching patterns by correctly distinguishing between Server and Client components.
- Configuring advanced caching and revalidation strategies to optimize application performance and data freshness.
- Setting up robust error handling and loading states using standardized error.tsx and loading.tsx conventions.
- Defining SEO-friendly metadata and dynamic route segments according to modern Next.js standards.
| name | nextjs-app-router |
|---|---|
| description | Next.js 15 App Router patterns for this project. Use when creating routes, API endpoints, server components, or client components. |
Next.js 15 App Router
Directory Structure
app/- Routes and API handlersclient/- Client components and utilitiesserver/- Server-side servicesshared/- Shared types and utilities
Route Handlers (API)
// app/api/example/route.ts
import { NextRequest, NextResponse } from 'next/server';
export async function POST(request: NextRequest) {
const body = await request.json();
// Validate with zod schema from shared/validation/
return NextResponse.json({ data });
}
Server Components (Default)
// No 'use client' directive
export default async function Page() {
const data = await fetchData(); // Direct DB/API calls
return <div>{data}</div>;
}
Client Components
'use client';
// Required for: hooks, browser APIs, event handlers, state
import { useState } from 'react';
Data Fetching
- Server Components: Direct async/await
- Client Components: Use
client/utils/api-client.ts
Caching
// Revalidate every hour
export const revalidate = 3600;
// Or disable caching
export const dynamic = 'force-dynamic';
Error Handling
error.tsx- Error boundary per routenot-found.tsx- 404 handlingloading.tsx- Suspense fallback
Metadata
export const metadata = {
title: 'Page Title',
description: 'Page description',
};