Как подключить Next.js к Django: пошаговое руководство для разработчиков

19.10.2025
57550

14 мин
246

Интеграция Django, мощного Python-фреймворка для бэкенда, с Next.js, популярным React-фреймворком для фронтенда, позволяет создавать высокопроизводительные, масштабируемые и SEO-дружественные веб-приложения. Django отлично справляется с обработкой данных, бизнес-логикой и администрированием, в то время как Next.js предоставляет современные возможности рендеринга (SSR, SSG, ISR) и превосходный опыт разработки пользовательских интерфейсов.

Саммари статьи

ChatGPT

Google AI

Grok

Perplexity

Преимущества использования Next.js для фронтенда Django

Улучшенная производительность и SEO: Next.js предлагает серверный рендеринг (SSR) и генерацию статических сайтов (SSG), что значительно ускоряет начальную загрузку страниц и улучшает индексацию поисковыми системами по сравнению с традиционными клиентскими SPA (Single Page Applications).

Современный DX (Developer Experience): Next.js обладает продуманной структурой проекта, встроенной маршрутизацией, оптимизацией изображений, поддержкой TypeScript "из коробки" и быстрой перезагрузкой (Fast Refresh), что упрощает и ускоряет разработку.

Разделение ответственности: Четкое разделение между бэкендом (Django) и фронтендом (Next.js) упрощает командную работу, тестирование и поддержку проекта. Каждая часть может развиваться и масштабироваться независимо.

Гибкость рендеринга: Возможность выбирать стратегию рендеринга (SSR, SSG, CSR, ISR) для каждой страницы отдельно позволяет оптимизировать производительность и пользовательский опыт.

Когда стоит использовать Next.js и Django вместе

Контент-ориентированные приложения: Блоги, новостные порталы, интернет-магазины, где важны SEO и быстрая загрузка контента.

Сложные пользовательские интерфейсы: Приложения с интерактивными дашбордами, требующие высокой производительности рендеринга и отзывчивости.

Проекты с разделением команд: Когда над бэкендом и фронтендом работают разные команды.

Требование высокой производительности: Когда стандартного шаблонизатора Django недостаточно для достижения нужных показателей скорости и интерактивности.

Настройка Django REST Framework

Для взаимодействия между Django и Next.js мы будем использовать Django REST Framework (DRF) для создания RESTful API.

Установка Django и Django REST Framework

Предполагается, что у вас уже установлен Python и настроено виртуальное окружение.

# Активируйте ваше виртуальное окружение
source venv/bin/activate # Linux/macOS
# venv\Scripts\activate # Windows

# Установка зависимостей
pip install django djangorestframework django-cors-headers

# Создание Django проекта и приложения
django-admin startproject core .
django-admin startapp api

Не забудьте добавить rest_framework, corsheaders и ваше приложение api в INSTALLED_APPS в core/settings.py.

# core/settings.py
INSTALLED_APPS = [
    # ... другие приложения
    'rest_framework',
    'corsheaders',
    'api.apps.ApiConfig', # Или просто 'api'
    # ...
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # Должен быть выше CommonMiddleware
    'django.middleware.security.SecurityMiddleware',
    # ... остальные middleware
    'django.middleware.common.CommonMiddleware',
    # ...
]

Создание Django-приложения и моделей

Определим простую модель, например, для статей.

# api/models.py
from django.db import models
from django.contrib.auth.models import User

class Article(models.Model):
    """Модель для хранения статей."""
    title: str = models.CharField(max_length=200)
    content: str = models.TextField()
    author: User = models.ForeignKey(User, on_delete=models.CASCADE, related_name='articles')
    created_at: models.DateTimeField = models.DateTimeField(auto_now_add=True)
    updated_at: models.DateTimeField = models.DateTimeField(auto_now=True)

    def __str__(self) -> str:
        return self.title

Выполните миграции:

python manage.py makemigrations api
python manage.py migrate

Настройка сериализаторов и представлений (views) DRF

Сериализаторы преобразуют сложные типы данных (например, экземпляры моделей Django) в нативные типы Python, которые затем легко рендерятся в JSON.

# api/serializers.py
from rest_framework import serializers
from django.contrib.auth.models import User
from .models import Article

class UserSerializer(serializers.ModelSerializer):
    """Сериализатор для модели пользователя."""
    class Meta:
        model = User
        fields: tuple[str, ...] = ('id', 'username', 'email')

class ArticleSerializer(serializers.ModelSerializer):
    """Сериализатор для модели статьи."""
    author_details = UserSerializer(source='author', read_only=True)

    class Meta:
        model = Article
        fields: tuple[str, ...] = (
            'id', 'title', 'content', 'author', 'author_details', 'created_at', 'updated_at'
        )
        read_only_fields: tuple[str, ...] = ('author',)

    def create(self, validated_data: dict) -> Article:
        """При создании статьи устанавливаем автора из запроса."""
        validated_data['author'] = self.context['request'].user
        return super().create(validated_data)

Представления (Views) обрабатывают HTTP-запросы и используют сериализаторы для формирования ответов.

# api/views.py
from rest_framework import viewsets, permissions
from .models import Article
from .serializers import ArticleSerializer

class ArticleViewSet(viewsets.ModelViewSet):
    """API endpoint, который позволяет просматривать и редактировать статьи."""
    queryset = Article.objects.select_related('author').order_by('-created_at')
    serializer_class = ArticleSerializer
    # Устанавливаем права доступа: только аутентифицированные могут изменять,
    # остальные - только читать.
    permission_classes = [permissions.IsAuthenticatedOrReadOnly]

    def get_queryset(self):
        """При необходимости можно добавить фильтрацию, например, по автору."""
        # queryset = super().get_queryset()
        # user = self.request.user
        # if user.is_authenticated:
        #     return queryset.filter(author=user)
        # return queryset.none() # Или вернуть все для анонимов, если нужно
        return super().get_queryset()

Настроим URL-маршрутизацию для API.

# api/urls.py
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import ArticleViewSet

router = DefaultRouter()
router.register(r'articles', ArticleViewSet, basename='article')

urlpatterns = [
    path('', include(router.urls)),
]

# core/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include('api.urls')), # Подключаем URL нашего API
    # Добавьте сюда URL для аутентификации DRF, если используете SessionAuthentication
    # path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

Настройка CORS для локальной разработки

Чтобы Next.js-приложение (работающее на другом порту) могло делать запросы к Django API, нужно настроить CORS (Cross-Origin Resource Sharing).

# core/settings.py

# ... (в MIDDLEWARE уже добавили 'corsheaders.middleware.CorsMiddleware')

# Настройки CORS
CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000', # Адрес вашего Next.js приложения в режиме разработки
    'http://127.0.0.1:3000',
]

# Если вы используете аутентификацию на основе сессий/cookie с запросами 'credentials',
# установите этот параметр в True
CORS_ALLOW_CREDENTIALS = True

# Можно также использовать CORS_ALLOWED_ORIGIN_REGEXES или CORS_ALLOW_ALL_ORIGINS (не рекомендуется для продакшена)
# CORS_ALLOW_ALL_ORIGINS = True # Для быстрой проверки, но небезопасно

Интеграция Next.js с Django

Теперь настроим фронтенд на Next.js для взаимодействия с нашим Django API.

Создание Next.js-приложения

npx create-next-app@latest my-frontend --typescript
cd my-frontend
npm run dev # или yarn dev

Настройка Next.js для запросов к Django API

Удобно хранить базовый URL API в переменных окружения. Создайте файл .env.local в корне Next.js проекта:

# .env.local
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000/api/v1

Теперь можно использовать process.env.NEXT_PUBLIC_API_URL в коде фронтенда.

Для выполнения HTTP-запросов можно использовать встроенный fetch или библиотеки типа axios или swr.

npm install axios # Пример установки axios

Создадим экземпляр axios для удобства:

// lib/axios.ts
import axios, { AxiosInstance } from 'axios';

const apiClient: AxiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  // Можно добавить заголовки по умолчанию, если необходимо
  // headers: {
  //   'Content-Type': 'application/json',
  // },
});

// Добавляем перехватчик для обработки ошибок (опционально)
apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    // Обработка ошибок API
    console.error('API call error:', error);
    return Promise.reject(error);
  }
);

export default apiClient;

Получение данных из Django REST API в Next.js

Next.js предлагает различные функции для получения данных: getStaticProps (SSG), getServerSideProps (SSR), или получение данных на клиенте (CSR) с использованием useEffect и useState (или библиотек типа swr/react-query).

Пример с getServerSideProps для получения списка статей:

// pages/articles/index.tsx
import type { GetServerSideProps, NextPage } from 'next';
import apiClient from '../../lib/axios'; // Путь к вашему экземпляру axios

// Определение типа для статьи (согласовано с DRF Serializer)
interface User {
  id: number;
  username: string;
  email: string;
}

interface Article {
  id: number;
  title: string;
  content: string;
  author: number;
  author_details: User;
  created_at: string;
  updated_at: string;
}

interface ArticlesPageProps {
  articles: Article[];
  error?: string;
}

// Функция для получения данных на сервере
export const getServerSideProps: GetServerSideProps = async (context) => {
  try {
    // Извлекаем токен аутентификации из cookie, если он там есть
    const token = context.req.cookies.authToken; // Название cookie зависит от вашей реализации
    const headers = token ? { Authorization: `Bearer ${token}` } : {};

    // Выполняем запрос к API
    const response = await apiClient.get('/articles/', { headers });

    // Проверяем, есть ли поле 'results' для пагинации DRF
    const articles = response.data.results || response.data;

    return {
      props: {
        articles: articles,
      },
    };
  } catch (error: any) { // Используем any или AxiosError
    console.error('Failed to fetch articles:', error);
    // Возвращаем ошибку в props, чтобы отобразить ее на странице
    return {
      props: {
        articles: [],
        error: `Failed to load articles: ${error.message || 'Unknown error'}`, // Предоставляем сообщение об ошибке
      },
    };
  }
};

// Компонент страницы
const ArticlesPage: NextPage = ({ articles, error }) => {
  if (error) {
    return Error: {error};
  }

  if (!articles || articles.length === 0) {
    return No articles found.;
  }

  return (
    
      Articles
      
        {articles.map((article) => (
          
            {article.title}
            By {article.author_details.username}

        
            
            
            
            Реклама
        
    
            {/* Отображение остальной информации */}
          
        ))}
      
    
  );
};

export default ArticlesPage;

Отображение данных из Django в компонентах Next.js

Как показано в примере выше, данные, полученные через getServerSideProps или getStaticProps, передаются в компонент страницы через props. Затем вы можете использовать стандартные возможности React для рендеринга этих данных.

Аутентификация и авторизация

Настройка аутентификации в Django REST Framework

DRF поддерживает различные схемы аутентификации: SessionAuthentication, TokenAuthentication, JWT Authentication (с помощью сторонних пакетов, например, djangorestframework-simplejwt). Для SPA и мобильных приложений часто используется JWT.

Установим djangorestframework-simplejwt:

pip install djangorestframework-simplejwt

Добавьте его в INSTALLED_APPS и настройте DRF:

# core/settings.py
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        # Порядок важен
        # 'rest_framework.authentication.SessionAuthentication', # Если нужна поддержка входа через админку Django
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ),
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticatedOrReadOnly', # Глобальные права по умолчанию
    ),
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 10 # Пример пагинации
}

# Настройки Simple JWT (опционально)
from datetime import timedelta

SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=60), # Время жизни Access токена
    'REFRESH_TOKEN_LIFETIME': timedelta(days=1),    # Время жизни Refresh токена
    'ROTATE_REFRESH_TOKENS': False,
    'BLACKLIST_AFTER_ROTATION': True,
    # ... другие настройки
     # Настройка для отправки JWT через HttpOnly cookie (более безопасно)
    # 'AUTH_COOKIE': 'access_token',  # Cookie name for access token
    # 'AUTH_COOKIE_REFRESH': 'refresh_token', # Cookie name for refresh token
    # 'AUTH_COOKIE_SECURE': not DEBUG, # Use secure flag in production
    # 'AUTH_COOKIE_HTTP_ONLY': True,
    # 'AUTH_COOKIE_PATH': '/',
    # 'AUTH_COOKIE_SAMESITE': 'Lax', # Or 'Strict'
}

Добавьте эндпоинты для получения и обновления токенов в core/urls.py:

# core/urls.py
from django.contrib import admin
from django.urls import path, include
from rest_framework_simplejwt.views import (
    TokenObtainPairView,
    TokenRefreshView,
    TokenVerifyView,
)

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include('api.urls')),
    # Эндпоинты JWT
    path('api/v1/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
    path('api/v1/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
    path('api/v1/token/verify/', TokenVerifyView.as_view(), name='token_verify'),
]

Реализация аутентификации в Next.js (например, с помощью JWT)

Во фронтенде необходимо:

Создать форму входа.

При отправке формы делать POST-запрос на эндпоинт /api/v1/token/ с username и password.

Сохранять полученные access и refresh токены (например, в localStorage, sessionStorage или HttpOnly cookies, если настроено на бэкенде).

Прикреплять access токен к заголовку Authorization (Bearer <token>) для всех защищенных запросов к API.

Реализовать логику обновления access токена с помощью refresh токена, когда первый истекает.

Реализовать выход из системы (удаление токенов, возможно, блэклистинг refresh токена на бэкенде).

Для управления состоянием аутентификации удобно использовать React Context API или библиотеки управления состоянием (Zustand, Redux).

Пример функции входа:

// services/auth.ts (пример)
import apiClient from '../lib/axios';

interface TokenResponse {
  access: string;
  refresh: string;
}

export const login = async (username: string, password: string): Promise => {
  try {
    const response = await apiClient.post('/token/', { username, password });
    const { access, refresh } = response.data;

    // Сохранение токенов (Пример с localStorage, небезопасно для production)
    // В production лучше использовать HttpOnly cookies или более безопасное хранилище
    localStorage.setItem('accessToken', access);
    localStorage.setItem('refreshToken', refresh);

    // Установка токена в заголовки для последующих запросов
    apiClient.defaults.headers.common['Authorization'] = `Bearer ${access}`;

    return response.data;
  } catch (error) {
    console.error('Login failed:', error);
    // Удаляем заголовок авторизации в случае ошибки
    delete apiClient.defaults.headers.common['Authorization'];
    throw error; // Перебрасываем ошибку для обработки в UI
  }
};

export const logout = (): void => {
  // Удаление токенов
  localStorage.removeItem('accessToken');
  localStorage.removeItem('refreshToken');
  // Удаление заголовка
  delete apiClient.defaults.headers.common['Authorization'];
  // Дополнительно: можно вызвать эндпоинт для блэклистинга refresh токена
};

// Функция для добавления токена к запросам (если не используется глобальная настройка axios)
export const getAuthHeaders = (): { Authorization?: string } => {
  const token = localStorage.getItem('accessToken');
  return token ? { Authorization: `Bearer ${token}` } : {};
};

Защита API-эндопоинтов Django

DRF позволяет гибко настраивать права доступа (permission_classes) на уровне всего проекта (settings.py), на уровне ViewSet или отдельного action.

AllowAny: Доступ разрешен всем.

IsAuthenticated: Только для аутентифицированных пользователей.

IsAdminUser: Только для администраторов (is_staff=True).

IsAuthenticatedOrReadOnly: Аутентифицированные могут изменять, остальные — только читать.

Можно создавать собственные классы прав доступа, наследуясь от permissions.BasePermission.

# api/permissions.py
from rest_framework import permissions

class IsOwnerOrReadOnly(permissions.BasePermission):
    """
    Пользователь может редактировать только свои объекты.
    """
    def has_object_permission(self, request, view, obj):
        # Права на чтение разрешены для любого запроса,
        # поэтому мы всегда разрешаем GET, HEAD или OPTIONS запросы.
        if request.method in permissions.SAFE_METHODS:
            return True

        # Права на запись разрешены только владельцу объекта.
        return obj.author == request.user

# api/views.py
class ArticleViewSet(viewsets.ModelViewSet):
    # ...
    # Используем кастомное право доступа
    permission_classes = [permissions.IsAuthenticatedOrReadOnly, IsOwnerOrReadOnly]
    # ...

Развертывание и оптимизация

Развертывание Django и Next.js на различных платформах

Django:

Традиционные VPS/Dedicated: Nginx (веб-сервер) + Gunicorn/uWSGI (сервер приложений), Supervisor (управление процессами), PostgreSQL/MySQL (база данных).

PaaS (Platform as a Service): Heroku, PythonAnywhere, Google App Engine, AWS Elastic Beanstalk. Упрощают развертывание, но могут быть менее гибкими.

Контейнеры: Docker + Docker Compose/Kubernetes. Позволяют упаковать приложение со всеми зависимостями.

Next.js:

Vercel: Платформа от создателей Next.js, идеально подходит для развертывания Next.js-приложений с поддержкой SSR, SSG, ISR, Edge Functions.

Netlify: Похожа на Vercel, также отлично подходит для статических сайтов и приложений с функциями.

Node.js сервер: Запуск next start на собственном сервере (VPS, контейнер) с использованием PM2 или другого менеджера процессов.

Статический экспорт: next build && next export. Генерирует статические HTML/CSS/JS файлы, которые можно разместить на любом веб-сервере или CDN. Подходит только если не используется SSR или ISR во время выполнения.

Важно настроить веб-сервер (Nginx) для проксирования запросов к Django API (например, /api/*) и к Next.js приложению (для всего остального), либо развертывать их на разных доменах/поддоменах.

Оптимизация производительности Next.js и Django

Django:

Оптимизация запросов к БД (select_related, prefetch_related, индексы).

Кэширование (на уровне базы данных, представлений, шаблонов, использование Redis/Memcached).

Асинхронные задачи (Celery) для долгих операций.

Оптимизация сериализаторов (использование source, SerializerMethodField с умом).

Next.js:

Использование правильной стратегии рендеринга (SSG для статики, SSR для динамики, ISR для полустатичного контента).

Оптимизация изображений (next/image).

Динамические импорты (next/dynamic) для разделения кода.

Ленивая загрузка компонентов.

Анализ бандла (@next/bundle-analyzer).

Мемоизация компонентов (React.memo).

Общее:

Использование CDN для статических активов.

Сжатие Gzip/Brotli на веб-сервере.

Оптимизация сетевых запросов (уменьшение количества, размера).

Как подключить Next.js к Django: пошаговое руководство для разработчиков

Преимущества использования Next.js для фронтенда Django

Когда стоит использовать Next.js и Django вместе

Настройка Django REST Framework

Установка Django и Django REST Framework

Создание Django-приложения и моделей

Настройка сериализаторов и представлений (views) DRF

Настройка CORS для локальной разработки

Интеграция Next.js с Django

Создание Next.js-приложения

Настройка Next.js для запросов к Django API

Получение данных из Django REST API в Next.js

Articles

{article.title}

Отображение данных из Django в компонентах Next.js

Аутентификация и авторизация

Настройка аутентификации в Django REST Framework

Реализация аутентификации в Next.js (например, с помощью JWT)

Защита API-эндопоинтов Django

Развертывание и оптимизация

Развертывание Django и Next.js на различных платформах

Оптимизация производительности Next.js и Django

Рекомендации по обслуживанию и масштабированию

Метки:

Добавить комментарий

Как подключить Next.js к Django: пошаговое руководство для разработчиков

Преимущества использования Next.js для фронтенда Django

Когда стоит использовать Next.js и Django вместе

Настройка Django REST Framework

Установка Django и Django REST Framework

Создание Django-приложения и моделей

Настройка сериализаторов и представлений (views) DRF

Настройка CORS для локальной разработки

Интеграция Next.js с Django

Создание Next.js-приложения

Настройка Next.js для запросов к Django API

Получение данных из Django REST API в Next.js

Articles

{article.title}

Отображение данных из Django в компонентах Next.js

Аутентификация и авторизация

Настройка аутентификации в Django REST Framework

Реализация аутентификации в Next.js (например, с помощью JWT)

Защита API-эндопоинтов Django

Развертывание и оптимизация

Развертывание Django и Next.js на различных платформах

Оптимизация производительности Next.js и Django

Рекомендации по обслуживанию и масштабированию

Метки:

Добавить комментарий

Забудьте о статике: Ваш Django-сайт превратится в шедевр, используя силу Python и генерацию

JWT против Session Auth: Сравнение лучших практик генерации и управления токенами в Django REST Framework

Django `prefetch_related` с условием: Подробное руководство по фильтрации связанных данных в ORM