App Router ਵਿੱਚ Route Handlers (API routes) ਕੀ ਹਨ?

Question

Accepted Answer

**Route Handlers** App Router ਦਾ API endpoints ਬਣਾਉਣ ਦਾ ਤਰੀਕਾ ਹਨ — backend HTTP handlers ਜੋ ਤੁਹਾਡੇ Next.js ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਰਹਿੰਦੇ ਹਨ। ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ **`route.ts`** ਫਾਇਲ ਨਾਲ ਬਣਾਉਂਦੇ ਹੋ, HTTP methods ਦੇ ਨਾਮ ਅਨੁਸਾਰ functions export ਕਰਦੇ ਹੋ।

## endpoint ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ

```ts
// app/api/users/route.ts  →  serves /api/users
import { NextRequest, NextResponse } from "next/server";

export async function GET() {
  const users = await db.user.findMany();
  return NextResponse.json(users);             // GET /api/users
}

export async function POST(req: NextRequest) {
  const body = await req.json();               // read the request body
  const user = await db.user.create({ data: body });
  return NextResponse.json(user, { status: 201 }); // POST /api/users
}
```

ਹਰੇਕ exported method (`GET`, `POST`, `PUT`, `PATCH`, `DELETE`) ਉਸ verb ਨੂੰ ਹ੍ਬਾਂਦਲ ਕਰਦਾ ਹੈ। ਇਹ standard Web `Request`/`Response` APIs (via `NextRequest`/`NextResponse`) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।

## params ਅਤੇ query ਨੂੰ ਪੜ੍ਹਨਾ

```ts
// app/api/users/[id]/route.ts → /api/users/123
export async function GET(req: NextRequest, { params }: { params: { id: string } }) {
  const url = new URL(req.url);
  const sort = url.searchParams.get("sort"); // ?sort=name
  const user = await db.user.findUnique({ where: { id: params.id } });
  return NextResponse.json(user);
}
```

## Route Handlers vs Server Actions/Components ਕਦੋਂ ਵਰਤਣੇ ਹਨ

```text
Use Route Handlers for:
  ✓ Public APIs consumed by mobile apps / external clients
  ✓ Webhooks (Stripe, GitHub) — they need a URL endpoint
  ✓ Returning non-HTML (JSON, files, images, RSS)
  ✓ Client-side fetch() targets

Prefer Server Components for reading data into your own pages,
and Server Actions for form mutations — they avoid a manual API layer.
```

## ਹੋਰ capabilities

```ts
export const runtime = "edge";       // run on the Edge runtime
export const dynamic = "force-dynamic"; // opt out of caching
// Handlers can also stream responses, set cookies, and handle CORS.
```

## ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

Route Handlers Next.js ਨੂੰ full-stack ਬਣਾਉਂਦੇ ਹਨ: ਤੁਸੀਂ REST/JSON APIs, webhooks, ਅਤੇ file endpoints ਆਪਣੇ frontend ਦੇ ਨਾਲ web-standard `Request`/`Response` ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਬਣਾਉਂਦੇ ਹੋ।

ਇਹ ਜਾਣਨਾ ਕਿ ਕਦੋਂ ਇਹਨਾਂ ਤੱਕ ਪਹੁੰਚਣਾ ਹੈ (external clients, webhooks, non-HTML responses) ਬਨਾਮ Server Components/Actions ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਹੈ (internal data reads ਅਤੇ mutations), App Router backend ਨੂੰ ਸਾਫ਼-ਸੁਥਰੇ ਢੰਗ ਨਾਲ structure ਕਰਨ ਲਈ ਮੁੱਖ ਹੈ।