Route Handler

معالج المسار

GLS-000085

Intermediatereact-nextjs1 min read
route.tsroute handlernext api routeedge handlerapp router api

Definition

A file in the Next.js App Router that handles HTTP requests — the App Router equivalent of an API Route.

ملف في Next.js App Router يعالج طلبات HTTP — مكافئ App Router لمسار API.

Why It Matters

Every admin action and public API on 404Fault (/api/glossary/terms, /api/admin/*) is a route handler. They are the server-side backbone of the app.

كل إجراء أدمن وAPI عام في 404Fault (/api/glossary/terms و/api/admin/*) هو معالج مسار. إنها العمود الفقري من جانب الخادم للتطبيق.

Full Definition

In Next.js App Router, route handlers are defined in route.ts files (not page.tsx). They export named HTTP method functions: GET, POST, PUT, DELETE, PATCH. Route handlers replace the pages/api/ pattern from Pages Router. They can run on the Edge or Node.js runtime and have access to the full Request and Response objects.
في Next.js App Router، يُعرَّف معالجو المسار في ملفات route.ts (ليس page.tsx). يُصدِّرون دوال أساليب HTTP المسماة: GET وPOST وPUT وDELETE وPATCH. يحل معالجو المسار محل نمط pages/api/ من Pages Router. يمكنهم العمل على Edge أو بيئة تشغيل Node.js ولديهم وصول لكائني Request وResponse الكاملين.

Example Usage

src/app/api/glossary/terms/route.ts exports a GET function that queries Firestore and returns published terms as JSON.

src/app/api/glossary/terms/route.ts يُصدِّر دالة GET تستعلم Firestore وتُعيد المصطلحات المنشورة كـ JSON.

Knowledge Graph

Avoid these mistakes when using Route Handler:

1

Placing route.ts in the same folder as page.tsx — they cannot coexist at the same path

2

Forgetting export const dynamic = 'force-dynamic' when the response depends on request data

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Route Handler.

Explain:
1. What is Route Handler and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Placing route.ts in the same folder as page.tsx — they cannot coexist at the same path, Forgetting export const dynamic = 'force-dynamic' when the response depends on request data
5. Best practices and production tips

Official Resources