Django with NextJS integration

I do not have experience with NextJS but I think what u are searching for is CORS. The Django Cors Headers package will do the job and has perfect documentation on how to set this up. Your NextJS app can then get the appropriate data from your Django Back-end API using something like Axios.

Happy coding!

I have built an admin console with modern React but backed by Django.

• Input: Django (Admin) + Next.js
• Output:
  • Next.js for admin pages
  • Django for backend, login into dashboard, user management. Admins page are implemented by embed Next.js pages via Django templates
  • API could be implemented with Django views too!

Steps:

• Implement Next.js pages not using getServerSideProps, use useEffect for fetching data from backend if needed
• Create simple Django templates and views, just embed the Next.js pages by using % include % (Django Template Syntax)
• May set assetPrefix in next.config.js to prevent static files conflict between Next.js and Django

Trying to show the naive exapmle:

// 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

Conclusion:

• Django (admin) have a strong user management system (roles, group...), I love it
• But I want to bring a new air of React for the admin interface, we can implement by Next.js or create-react-app,...
• Hope my idea can help you. I tried to write down my real world example as simple as possible