Next.js Skill
Provides comprehensive Next.js development capabilities for modern web applications.
When to Use This Skill
Activate this skill when working with:
- Next.js App Router
- Server Components and Client Components
- API Routes and Server Actions
- Static Site Generation (SSG)
- Server-Side Rendering (SSR)
Project Structure (App Router)
## Server Components (Default)
return (Agents {agents.map(agent => ({agent.name}))});}
export default AgentsPage; ```
Client Components
import {useState} from 'react';
export function AgentSelector({agents}: {agents: Agent[]}) {const [selected, setSelected] = useState<string | null>(null);
return (<select value={selected || ''} onChange={(e) => setSelected(e.target.value)} > Select an agent {agents.map(agent => ({agent.name}))});} ```
## Data Fetching
### Server Component Data Fetching
export default async function AgentPage({params}: {params: {id: string}}) {const agent = await getAgent(params.id); return;} ```
Revalidation
// On-demand revalidation import {revalidatePath, revalidateTag} from 'next/cache';
async function updateAgent(id: string, data: FormData) {'use server'; await db.update('agents', id, data); revalidatePath('/agents'); revalidateTag('agents');} ```
## Server Actions
async function createAgent(formData: FormData) {'use server';
const name = formData.get('name') as string; const type = formData.get('type') as string;
await db.insert('agents', {name, type});
revalidatePath('/agents'); redirect('/agents');}
export default function NewAgentPage() {return (Claude GPT Create Agent);} ```
API Routes
export async function GET(request: NextRequest) {const searchParams = request.nextUrl.searchParams; const type = searchParams.get('type');
const agents = await db.query('SELECT * FROM agents WHERE type = $1', [type]);
return NextResponse.json(agents);}
export async function POST(request: NextRequest) {const body = await request.json();
const agent = await db.insert('agents', body);
return NextResponse.json(agent, {status: 201});}
// app/api/agents/[id]/route.ts export async function GET(request: NextRequest, {params}: {params: {id: string}}) {const agent = await db.query('SELECT * FROM agents WHERE id = $1', [params.id]);
if (!agent) {return NextResponse.json({error: 'Not found'}, {status: 404});}
return NextResponse.json(agent);} ```
## Layouts and Loading States
// app/agents/loading.tsx export default function Loading() {return Loading agents...;}
// app/agents/error.tsx 'use client';
export default function Error({error, reset,}: {error: Error; reset: () => void;}) {return (Something went wrong! <button onClick={() => reset()}>Try again);} ```
Middleware
export function middleware(request: NextRequest) {// Authentication check const token = request.cookies.get('token');
if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {return NextResponse.redirect(new URL('/login', request.url));}
// Add headers const response = NextResponse.next(); response.headers.set('x-custom-header', 'value');
return response;}
export const config = {matcher: ['/dashboard/:path*', '/api/:path*'],}; ```
## Environment Variables
.env.local
DATABASE_URL=postgresql://... API_URL=http://localhost:8000
Public (exposed to browser)
NEXT_PUBLIC_APP_URL=http://localhost:3000 ```
// Client-accessible const appUrl = process.env.NEXT_PUBLIC_APP_URL; ```
## Build Commands
Development
npm run dev
Production build
npm run build npm start
Static export
npm run build
next.config.js: output: 'export'