Skip to main content

Що таке API Routes?

Next.jsMiddle~2 хв читання
Запропонувати правку

API Routes - це спосіб створювати серверні API-ендпоінти прямо всередині Next.js, без окремого backend-сервера.

Простіше кажучи: Next.js може бути і фронтендом, і бекендом одночасно.

Основна ідея

Ти описуєш маршрут - і Next.js перетворює його на API:

  • приходить HTTP-запит (GET, POST тощо)
  • код виконується на сервері
  • повертається JSON чи інша відповідь
  • браузер або серверний компонент отримує результат

При цьому:

  • код не потрапляє у клієнт
  • можна працювати з БД, токенами, секретами
  • не потрібен окремий Express / Nest / Fastify

Де існують API Routes

Pages Router (класичний варіант)

  • маршрути живуть у папці /pages/api
  • кожен файл - окремий API-ендпоінт

Приклад логіки:

  • /pages/api/posts → /api/posts
  • /pages/api/user → /api/user

App Router (сучасний варіант)

В App Router API Routes називаються Route Handlers.

  • живуть поруч зі сторінками
  • виглядають як route.ts / route.js
  • явно підтримують HTTP-методи (GET, POST, PUT, DELETE)

По суті - це той самий API, але:

  • ближчий до файлової структури застосунку
  • краще інтегрований з Server Components і кешуванням

Що можна робити в API Routes

Можна:

  • звертатися до бази даних
  • працювати з авторизацією
  • проксувати запити до зовнішніх API
  • валідувати дані
  • приховувати API-ключі
  • керувати кешем

Не можна:

  • використовувати window чи DOM
  • зберігати стан між запитами (сервер може бути stateless)

Навіщо вони потрібні

API Routes вирішують кілька задач:

1. Безпека

  • API-ключі залишаються на сервері
  • браузер ніколи їх не бачить

2. Спрощення архітектури

  • не потрібен окремий backend
  • менше інфраструктури
  • простіший деплой

3. Проксі між клієнтом і зовнішніми API

  • клієнт → API Route → зовнішній сервіс
  • можна нормалізувати дані
  • можна кешувати відповіді

4. Робота з формами і діями

  • відправка форм
  • збереження даних
  • серверна валідація

API Routes і кешування

API Routes:

  • можуть використовувати кеш
  • можуть бути динамічними
  • можуть брати участь в ISR
  • можуть працювати на Edge або Node.js runtime

Це робить їх частиною загальної системи роботи з даними в Next.js.

Чим API Routes НЕ є

Важливо не плутати:

  • це не заміна повноцінного мікросервісного backend
  • не підходять для довгих задач
  • не зберігають стан між запитами

Вони ідеальні для:

  • CRUD-операцій
  • інтеграцій
  • логіки "поруч з UI"

Коротко по суті

API Routes - це:

  • серверні функції всередині Next.js
  • доступні по HTTP
  • безпечні
  • тісно пов'язані з рендерингом і кешем

Вони дозволяють тримати дані, логіку та UI в одному проекті, не перетворюючи застосунок на моноліт.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку