Next.js API Routes: Полное руководство (Урок 6)

Next.js позволяет создавать back-end приложения на основе React.js, управляя клиентской и серверной сторонами приложения (например, взаимодействуя с базой данных MongoDB) без дополнительных фреймворков, таких как Express.js. Этот урок посвящен созданию API routes.

Создание API Routes

Создайте папку api. Она аналогична папке pages, но предназначена для API маршрутов. Внутри api можно создавать вложенные папки, соответствующие URL-адресам. Например, создайте папку data для обработки запросов по адресу /api/data.

Вместо файла page.js, в папке data создайте файл route.js для обработки URL-адресов и возврата результатов. В отличие от page.js, здесь происходит автоматическая обработка URL-адресов на сервере.

Обработка GET-запроса

Пример функции для обработки GET-запроса:

export async function GET(request) {
  return new Response('Here is data');
}

Функция экспортирует асинхронную функцию GET, принимающую объект request и возвращающую объект Response с сообщением «Here is data». Запрос можно протестировать в браузере по адресу /api/data.

Возвращение JSON-объекта

Вместо текста можно возвращать JSON-объекты:

export async function GET() {
  const data = {
    name: 'Bob',
    age: 10,
    bio: 'Some info'
  };
  return new Response(JSON.stringify(data));
}

Ответ будет содержать JSON-объект.

Обработка POST-запроса

Обработка POST-запросов аналогична обработке GET-запросов:

export async function POST(request) {
  const body = await request.json();
  return new Response(JSON.stringify(body));
}

Функция принимает POST-запрос, преобразует его тело в JSON-объект с помощью request.json() и возвращает его в ответе. Можно протестировать это в Postman, отправив POST-запрос с JSON-телом (например, {"name": "Alex"}).

Тестирование API

Для тестирования API рекомендуется использовать инструменты, такие как Postman. Укажите URL-адрес локального сервера (например, /api/data) и отправьте необходимый запрос (GET, POST и т.д.).

Другие типы запросов

Аналогично GET и POST, можно обрабатывать запросы PUT, DELETE, HEAD, OPTIONS, создавая для каждого типа отдельную функцию (например, export async function PUT(…)).

API Routes в Next.js позволяют создавать приложения с разделением на клиентскую и серверную части, взаимодействовать с базами данных и обрабатывать различные типы запросов, объединяя фронтенд и бэкенд в одном проекте.