与NextJS集成的Django

Question

如何有效地将Django与NextJS集成？你能分享一下吗？如果你有任何公共项目！或者是完成它的方法！

Answer 1

我没有使用NextJS的经验，但我认为你正在寻找的是CORS。Django Cors Headers包将完成这项工作，并且有关于如何设置的完美文档。然后，您的NextJS应用程序可以使用诸如Axios之类的东西从Django后端API获取适当的数据。

祝你编码愉快！

Answer 2

我已经建立了一个管理控制台与现代反应，但支持Django。

管理员输入: Django (管理员)+ Next.js

• Output：
• Next.js为后台管理pages
• Django，登录
  • ，用户管理。Admins页面是通过Django嵌入的Next.js页面实现的，templates
  • API可以用Django views too!

实现

步骤：

• 实现Next.js页面不使用getServerSideProps，如果使用简单的Django模板和视图，则使用useEffect从后台获取数据，只需使用% include % (Django模板语法)嵌入Next.js页面，
• 可以在next.config.js中设置assetPrefix，以防止Next.js和Django

之间的静态文件冲突

试图展示天真的例子：

// Next.js project
// /pages/post/index.js
...
useEffect(() => {
  fetchPosts(...).then(data 
});

// /pages/post/[id].js

...
const router = useRouter();
const { id } = router.query;

useEffect(() => {
  fetchPost(id).then()...
});

// npm run export
out/_next
out/post.html
out/post/[id].html

// use gulp.js or sth to copy the exported files (`out`) into Django project (`static` and `templates` folder)
django-app/static/_next // I copy _next into static and make Django serve its statics + Next.js _next

// These two pages above from out
django-app/templates/next-admin/post.html  
django-app/templates/next-admin/post/[id].html

// Django project

// templates
// django-app/templates/post/list.html
{% block content %}
    {% include "next-admin/post.html" %}
{% endblock %}

// django-app/templates/post/detail.html
{% block content %}
    {% include "next-admin/post/[id].html" %}
{% endblock %}

// views.py
def post_list_view(request):
   return render(request, 'post/list.html', {})

def post_detail_view(request, _id):
   return render(request, 'post/detail.html', {"id": _id})

// urls.py
path('post', post_list_ivew, name='post-list'),
path('post/<str:_id>', post_detail_view, name='post-detail'),

// Next.js npm run export -> Django python manage.py runserver
// Maybe you have to install corsheader for client data fetching
// And custom the admin/base.html or base_site.html for adding navigation links to your admin pages built by Next.js

结论：

• Django (管理员)有一个强大的用户管理系统(角色，组...)，我喜欢它
• ，但我想为管理界面带来一个新的空气反应，我们可以通过Next.js或创建-反应-应用程序实现，...
• 希望我的想法可以帮助你。我试着把我的真实世界的例子写得尽可能简单