Пошук уроків, статей та іншого контенту
Файли route.ts для випадків, які Server Actions не покривають — зовнішні клієнти й вебхуки.
Файл route.ts усередині папки app/ (замість page.tsx) перетворює цей сегмент на HTTP-ендпоінт: він експортує функції з іменами HTTP-методів (GET, POST, PUT, DELETE), кожна з яких отримує об'єкт запиту й повертає відповідь:
// app/api/webhooks/payment/route.ts
import { NextRequest, NextResponse } from "next/server";
export async function POST(request: NextRequest) {
const payload = await request.json();
if (!isValidSignature(request.headers.get("x-signature"), payload)) {
return NextResponse.json({ error: "Invalid signature" }, { status: 401 });
}
await processPayment(payload);
return NextResponse.json({ received: true });
}Для мутацій, які ініціює власний UI застосунку (форми, кнопки на сторінках), Server Actions зазвичай простіші — без ручного написання клієнтського коду відправки запиту. Route Handler потрібен там, де запит приходить не з власного React-дерева застосунку:
Вебхуки від зовнішніх сервісів (платіжна система, система розсилок) — вони надсилають звичайний HTTP POST-запит і не знають про Server Actions.
Публічний API для сторонніх клієнтів — мобільний застосунок, інтеграції партнерів.
Ендпоінти, що мають повертати не HTML/JSON для React, а інший формат — файл, зображення, RSS-стрічку.
Практичне правило: якщо запит завжди йде з власного UI застосунку — Server Action. Якщо запит може прийти від когось, хто не є цим конкретним React-застосунком, — Route Handler.
Так само, як у сторінках, params у Route Handler з динамічним сегментом — це Promise починаючи з Next.js 15:
// app/api/posts/[id]/route.ts
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> },
) {
const { id } = await params;
const post = await getPost(id);
return NextResponse.json(post);
}Створювати Route Handler і викликати його fetch()-ом із власного Client Component там, де простіше й швидше підійшов би Server Action — зайвий мережевий виток туди-назад без реальної потреби.
Не перевіряти підпис/автентичність вебхука перед обробкою — будь-хто, хто знає URL ендпоінта, технічно може надіслати підроблений запит.
Забути, що params — Promise, і намагатись читати params.id напряму без await, як у старіших версіях Next.js.
Route Handlers (файл route.ts) створюють явний HTTP-ендпоінт і потрібні там, куди запити приходять не з власного UI застосунку — вебхуки, публічний API, нестандартні формати відповіді. Для мутацій, які завжди ініціює власний інтерфейс, Server Actions зазвичай простіші й вимагають менше ручного коду.