Django REST Framework + Next.js: как связать фронтенд с API

Как разделяются обязанности

Next.js отвечает за интерфейс, маршруты и пользовательские взаимодействия. Django REST Framework предоставляет API, работает с данными и бизнес-правилами. HTTP-запрос связывает эти части, браузер не должен знать секретные ключи Django или внешних AI-провайдеров.

1. Опишите контракт API прежде, чем писать форму

Начните с метода, URL, JSON-полей и ошибок. Например, отправка текстового сообщения может выглядеть так:

POST /api/messages/
Content-Type: application/json

{ "text": "Привет" }

HTTP/1.1 201 Created
{ "id": 42, "text": "Привет" }

Это упрощённый пример контракта API для текстового сообщения.

2. Django, сериализатор и представление

Сериализатор проверяет входные данные и преобразует их в представление, доступное API. View выбирает действие и HTTP-статус. Для продакшн-приложения здесь также необходимы права доступа и ограничения запросов.

# Упрощённая иллюстрация DRF
from rest_framework import serializers

class MessageSerializer(serializers.Serializer):
    text = serializers.CharField(max_length=4000)

Пример специально не имитирует хранение сообщения, авторизацию или обращение к модели, эти функции требуют отдельного проектирования.

3. Next.js, вызывайте API на правильной границе

Когда данные нужны серверному компоненту, запрос может выполнять сервер Next.js. Интерактивная форма обычно инициирует запрос по действию пользователя. Выбор зависит от того, где находятся токены, cookie и данные, допустимые к передаче браузеру.

async function sendMessage(text: string) {
  const response = await fetch('/api/messages/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text }),
  });
  if (!response.ok) throw new Error('Ошибка API');
  return response.json();
}

Относительный путь здесь предполагает настроенный прокси или API на том же origin. Если Django работает на другом домене, потребуются корректный абсолютный адрес, политика CORS и схема авторизации.

4. Авторизация, CORS и обработка ошибок

Авторизация: согласуйте, передаются ли cookie, bearer-token или иной механизм, не храните секретные ключи в клиентском коде.
CORS: настройте список доверенных origin при прямом браузерном запросе на Django, CORS не заменяет проверку прав доступа.
Ошибки: обрабатывайте 400, 401, 403, 429 и 5xx отдельно от сетевого отказа.
Таймауты: предусмотрите понятный интерфейс ожидания и повторный запрос там, где повторение безопасно.

5. Как проверить интеграцию

Убедитесь, что браузер действительно получает ожидаемый ответ, что сервер валидирует входные данные и что ошибки не превращаются в молчаливое зависание UI. Проверяйте сценарии без авторизации, с неправильным JSON и с недоступным Django-сервером. Только после этого подключайте AI-провайдера.

В линейке AI на Django и Next.js вторая часть посвящена бэкенду и связи его с фронтендом. Примеры показывают базовую интеграцию фронтенда с API.