Django无法加载Next.js项目的CSS、SVG等静态资源求助

核心原因 #

Django无法识别Next.js构建后的静态资源路径（如/_next/static/...、根目录下的SVG文件），需要调整路由和静态文件配置，让Django正确映射这些资源。

解决方案 #

1. 确认Next.js构建方式 #

• 若为静态页面场景，执行静态导出：

  cd your-nextjs-project
  next build && next export
  

  执行后会生成out目录，包含所有静态资源和HTML文件。

2. 调整Django settings.py #

将Next.js导出的out目录添加到静态文件搜索路径：

# settings.py
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

# 添加Next.js静态资源目录
STATICFILES_DIRS = [
    BASE_DIR / "your-nextjs-project/out",
    BASE_DIR / "your-nextjs-project/out/_next/static",
]

# 保持原有STATIC配置不变
STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / 'staticfiles'

3. 配置Django urls.py #

添加路由规则，让Django处理Next.js的静态资源请求：

# urls.py
from django.conf import settings
from django.conf.urls.static import static
from django.urls import path
from django.views.static import serve

urlpatterns = [
    # 你的其他Django路由（如admin、api）
    path("", serve, {"document_root": settings.BASE_DIR / "your-nextjs-project/out"}),
    path("_next/<path:path>", serve, {"document_root": settings.BASE_DIR / "your-nextjs-project/out/_next"}),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

4. 调整Next.js配置（可选） #

在next.config.js中开启静态导出模式，确保资源路径适配Django路由：

// next.config.js
const nextConfig = {
  output: 'export',
  trailingSlash: true, // 避免部分路径出现404
}

module.exports = nextConfig

5. 验证操作 #

1. 重新构建Next.js生成最新的out目录
2. 重启Django开发服务器
3. 访问页面，检查控制台是否还有404错误

内容的提问来源于stack exchange，提问作者Naman Sharma