Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке API Routes?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**API Routes** - це спосіб створювати **серверні API-ендпоінти прямо всередині Next.js**, без окремого backend-сервера. **Ключове:** Next.js може бути **і фронтендом, і бекендом одночасно**.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**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 в одному проекті**, не перетворюючи застосунок на моноліт.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.