如何将Next.js与Django集成以兼顾性能与安全性？

Django + Next.js确实是个很赞的组合——Django的安全特性和成熟后端生态，搭配Next.js灵活的前端渲染能力，完美兼顾速度与开发体验。下面是几种主流的集成方案，按实用性排序：

方案1：前后端分离（最推荐） #

这种模式下Django专注做API后端，Next.js负责前端渲染，两者完全独立开发部署，是目前最流行的方式。

步骤1：配置Django作为API服务 #

• 安装必要依赖：

  pip install django djangorestframework django-cors-headers
  

• 在settings.py中配置跨域和DRF：

  INSTALLED_APPS = [
      # ... 其他内置app
      'rest_framework',
      'corsheaders',
  ]
  
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',  # 放在最前面
      # ... 其他中间件
  ]
  
  # 允许Next.js域名跨域，比如本地开发的http://localhost:3000
  CORS_ALLOWED_ORIGINS = [
      "http://localhost:3000",
      # 生产环境的Next.js域名
  ]
  
  REST_FRAMEWORK = {
      'DEFAULT_PERMISSION_CLASSES': [
          'rest_framework.permissions.IsAuthenticatedOrReadOnly',
      ]
  }
  

• 编写API接口，比如用DRF的ViewSet：

  # views.py
  from rest_framework import viewsets
  from .models import Post
  from .serializers import PostSerializer
  
  class PostViewSet(viewsets.ModelViewSet):
      queryset = Post.objects.all()
      serializer_class = PostSerializer
  

• 配置路由urls.py：

  from django.urls import path, include
  from rest_framework.routers import DefaultRouter
  from .views import PostViewSet
  
  router = DefaultRouter()
  router.register(r'posts', PostViewSet)
  
  urlpatterns = [
      path('api/', include(router.urls)),
      # ... 其他Django路由
  ]
  

步骤2：Next.js调用Django API #

在Next.js中可以通过客户端请求或者服务端渲染方法调用Django接口：

• 客户端组件请求示例：

  // app/posts/page.js
  'use client';
  
  import { useEffect, useState } from 'react';
  
  export default function PostsPage() {
    const [posts, setPosts] = useState([]);
  
    useEffect(() => {
      async function fetchPosts() {
        const res = await fetch('http://localhost:8000/api/posts/');
        const data = await res.json();
        setPosts(data);
      }
      fetchPosts();
    }, []);
  
    return (
      <div>
        <h1>Posts from Django API</h1>
        {posts.map(post => (
          <div key={post.id}>{post.title}</div>
        ))}
      </div>
    );
  }
  

• 服务端渲染示例（Next.js 13+）：

  // app/posts/page.js
  export default async function PostsPage() {
    const res = await fetch('http://localhost:8000/api/posts/', { cache: 'no-store' });
    const posts = await res.json();
  
    return (
      <div>
        <h1>Posts from Django API</h1>
        {posts.map(post => (
          <div key={post.id}>{post.title}</div>
        ))}
      </div>
    );
  }
  

步骤3：部署 #

• Django：用Gunicorn作为WSGI服务器，搭配Nginx反向代理处理API请求。
• Next.js：部署到Vercel（官方推荐，天然支持SSR/SSG），或者用Nginx反向代理指向next start启动的生产服务。

方案2：嵌入Next.js静态构建产物到Django #

如果只需要在Django项目中嵌入部分Next.js页面，可以把Next.js构建成静态文件，放到Django中托管。

步骤1：构建Next.js静态文件 #

在Next.js项目中执行：

next build && next export

这会生成out目录，包含所有静态HTML、CSS和JS文件。

步骤2：集成到Django #

• 把out目录下的文件复制到Django的static/nextjs目录。
• 在Django模板中引用Next.js页面：

  <!-- templates/nextjs_page.html -->
  {% load static %}
  <iframe src="{% static 'nextjs/index.html' %}" width="100%" height="100%" frameborder="0"></iframe>
  

• 或者配置Django路由直接指向静态HTML：

  # urls.py
  from django.views.generic import TemplateView
  from django.conf import settings
  from django.conf.urls.static import static
  
  urlpatterns = [
      # ... 其他路由
      path('nextjs-page/', TemplateView.as_view(template_name='nextjs/index.html')),
  ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
  

方案3：Django作为Next.js自定义服务器（不推荐） #

这种方式把Django和Next.js的服务器绑定在一起，复杂度较高，仅适合特殊场景（比如需要Django完全控制前端渲染逻辑）。

核心思路是用Django的WSGI服务器启动Next.js的Node服务，通过Django路由转发请求到Next.js，但会大幅增加部署和维护成本，一般不建议采用。

关键注意事项 #

• 认证：用JWT（djangorestframework-simplejwt）实现跨端认证，Next.js中把token存在Cookie或localStorage中，请求API时在Header中携带Authorization: Bearer <token>。
• 静态资源：Django负责托管后端静态资源（如admin界面）和媒体文件，Next.js管理自己的前端静态资源，部署时注意资源路径配置。
• 性能优化：Next.js开启SSG/ISR减少服务器压力，Django开启Redis缓存提升API响应速度。

内容的提问来源于stack exchange，提问作者Arjav Choudhary