API Routes у Next.js
Route Handlers, GET/POST-запити, middleware, CORS, автентифікація, обробка помилок
1Що таке Route Handler у Next.js 13+ з App Router?
Що таке Route Handler у Next.js 13+ з App Router?
Відповідь
Route Handler — це серверна функція у файлі route.ts (або route.js), яка дозволяє створювати власні API-ендпоінти. На відміну від API Routes з Pages Router (папка pages/api), Route Handlers розташовані в папці app/ та підтримують Web Standard Request/Response. Вони обробляють HTTP-запити (GET, POST, PUT, DELETE тощо) на стороні сервера.
2Як створити Route Handler для обробки GET-запиту?
Як створити Route Handler для обробки GET-запиту?
Відповідь
Щоб обробити GET-запит, потрібно експортувати async-функцію з іменем GET у файлі route.ts. Ця функція приймає об'єкт Request і повертає Response за допомогою NextResponse.json(). Next.js автоматично зіставляє експортовану функцію GET з HTTP GET-запитами на цьому маршруті. Інші HTTP-методи (POST, PUT, DELETE, PATCH) дотримуються того ж патерну зі своїми відповідними іменами.
3Яка різниця між NextResponse та стандартним Response?
Яка різниця між NextResponse та стандартним Response?
Відповідь
NextResponse розширює стандартний клас Web Response функціями, специфічними для Next.js. Він надає зручні методи, такі як NextResponse.json() для автоматичної серіалізації, NextResponse.redirect() для перенаправлень, а також спрощує маніпуляції з cookie та заголовками. Хоча стандартний Response працює, NextResponse рекомендується, оскільки він спрощує код і забезпечує кращу інтеграцію з екосистемою Next.js.
Як отримати параметри пошуку (query params) у Route Handler?
Як обробити POST-запит та отримати JSON body?
+17 питань зі співбесід
Інші теми співбесід React / Next.js
Основи JavaScript
Основи React
React Hooks
Життєвий цикл компонента
React Router
Управління станом з Context
Форми та Controlled Components
Отримання даних та API
React Query (TanStack Query)
Styling & CSS-in-JS
Основи Next.js
TypeScript з React
Data Fetching у Next.js
Server Actions у Next.js
Маршрутизація та Навігація в Next.js
Metadata & SEO у Next.js
Middleware та Auth у Next.js
Тестування React
Zustand State Management
Оптимізація продуктивності React
Error Boundaries & обробка помилок
Advanced React Patterns
Розширені можливості Next.js
Розгортання та Продакшн Next.js
Architecture & Design Patterns
React Server Components
Інтернаціоналізація Next.js
React Безпека & Найкращі Практики
Опануй React / Next.js для наступної співбесіди
Отримай доступ до всіх питань, flashcards, технічних тестів, вправ code review та симуляторів співбесід.
Почни безкоштовно