api

API Routes Skill

Purpose

This skill covers creating and working with API routes in Next.js 15+, including REST endpoints, server actions, and data fetching patterns.

Key Concepts

• Route Handlers: API endpoints in the app/api/ directory
• Server Actions: Server-side functions that can be called from client components
• Server Components: Can fetch data directly without API routes
• Edge Runtime: Optional edge runtime for global performance

Route Handlers

Basic GET Endpoint

// app/api/cases/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const cases = await getCases(); // Your data fetching logic
  
  return NextResponse.json(cases);
}

POST Endpoint

// app/api/cases/route.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    
    // Validate the input
    if (!body.title) {
      return NextResponse.json(
        { error: 'Title is required' },
        { status: 400 }
      );
    }
    
    const newCase = await createCase(body);
    
    return NextResponse.json(newCase, { status: 201 });
  } catch (error) {
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    );
  }
}

Dynamic Route Handler

// app/api/cases/[id]/route.ts
import { NextResponse } from 'next/server';

interface RouteContext {
  params: Promise<{ id: string }>;
}

export async function GET(
  request: Request,
  context: RouteContext
) {
  const { id } = await context.params;
  const caseData = await getCaseById(id);
  
  if (!caseData) {
    return NextResponse.json(
      { error: 'Case not found' },
      { status: 404 }
    );
  }
  
  return NextResponse.json(caseData);
}

export async function PATCH(
  request: Request,
  context: RouteContext
) {
  const { id } = await context.params;
  const body = await request.json();
  
  const updated = await updateCase(id, body);
  
  return NextResponse.json(updated);
}

export async function DELETE(
  request: Request,
  context: RouteContext
) {
  const { id } = await context.params;
  
  await deleteCase(id);
  
  return NextResponse.json({ success: true });
}