Skip to main content

Що таке API Routes у Next.js?

API Routes у Next.js - це спосіб створювати серверні API-ендпоінти прямо всередині проекту Next.js, без окремого backend-застосунку. Вони дозволяють обробляти запити, працювати з даними та віддавати JSON так само, як звичайний REST API.


Де вони знаходяться

Є два варіанти, залежно від роутера:

Pages Router

Файли в папці:

/pages/api/*.ts

Кожен файл - окремий API-ендпоінт.


App Router (Route Handlers)

Файли вигляду:

/app/api/.../route.ts

Це сучасна версія API Routes, яка краще інтегрована з App Router.


Де виконується код

  • API Routes завжди виконуються на сервері
  • код ніколи не потрапляє у браузер
  • можна безпечно використовувати:
    • секретні ключі
    • доступ до бази даних
    • серверні SDK

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

API Routes використовують, щоб:

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

Фактично це міні-backend всередині Next.js.


Як використовуються з фронтендом

З клієнта вони викликаються як звичайний API:

js
fetch("/api/posts")

При цьому:

  • логіка залишається на сервері
  • клієнт отримує тільки результат

Відмінність від client-side fetching

  • client-side fetching - запити з браузера
  • API Routes - серверний код, який може викликатися:
    • з клієнта
    • з Server Components
    • з інших API Routes

Коли API Routes - гарний вибір

  • невелика або середня серверна логіка
  • не потрібен окремий backend
  • fullstack-застосунок в одному репозиторії
  • прототипи, стартапи, SaaS

Коли не варто використовувати

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

У таких випадках частіше роблять окремий backend.


Коротка витяжка

  • API Routes - це серверні ендпоінти всередині Next.js
  • виконуються тільки на сервері
  • підходять для роботи з БД, API і секретами
  • дозволяють обійтися без окремого backend
  • в App Router реалізуються через Route Handlers

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

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

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