Day 97

API Routes in Next.js

12 min
JavaScript 100 Days

Next.js mein backend API bhi same project mein ban sakti hai — route.ts files mein. Alag Express server ki zaroorat nahi! Full-stack Next.js application banana ab bahut asaan hai.

Route Handlers

API endpoints Next.js mein.

route.ts
typescript
// app/api/users/route.ts

import { NextRequest, NextResponse } from "next/server";

// GET /api/users
export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const page = parseInt(searchParams.get("page") ?? "1");
  
  const users = await db.users.findMany({
    skip: (page - 1) * 10,
    take: 10,
  });
  
  return NextResponse.json({ success: true, data: users });
}

// POST /api/users
export async function POST(request: NextRequest) {
  const body = await request.json();
  
  const { name, email } = body;
  if (!name || !email) {
    return NextResponse.json(
      { error: "Name aur email required hain" },
      { status: 400 }
    );
  }
  
  const user = await db.users.create({ data: { name, email } });
  return NextResponse.json({ success: true, data: user }, { status: 201 });
}

// app/api/users/[id]/route.ts
export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  const user = await db.users.findUnique({ where: { id } });
  
  if (!user) {
    return NextResponse.json({ error: "User not found" }, { status: 404 });
  }
  
  return NextResponse.json({ data: user });
}

🎯 Practice Challenge

Next.js mein complete CRUD API banao — /api/todos GET, POST, PUT, DELETE. In-memory storage ya JSON file use karo.