Django + Next.js The Easy Way

Danial Keimasi — Fri, 25 Mar 2022 18:57:55 +0000

Introduction

After reading this article, you can create or enhance your projects using the many convenient features of Next.js and Django.

Using React instead of a Django template to create your frontend gives you access to many existing modern tools without the SEO issues of a SPA (Single Page Application) thanks to Next.js SSR capability.

You’ll also learn how to add Next.js to your existing Django project without any hassle, using django-nextjs.

Django

Django is a popular and fully featured server-side web framework, written in Python.

Next.js

Next.js is an open-source development framework built on top of Node.js, enabling React-based web applications functionalities such as server-side rendering and generating static websites.

How We Integrated Django + Next.js

There are several approaches to using these two frameworks together, but we are using one of them.

We are going to run Django and Next.js servers at the same time, use Django to accept web requests and use Next.js as an internal service that generates the HTML.

Accordingly, Django handles web requests, and for each request, Next.js is called inside the Django view to get the HTML response.

This is perfect if you already have a Django project, and you don’t want to change anything and just start using Next.js with it!

You can use this approach even if you are starting a new project because you’ll be able to use more Django features (e.g. sessions).

Architecture

You can use django-nextjs in both development and production environments easily:

Development Environment

When you run the project with ./manage.py runserver, you are using Django as a proxy for all the requests between you and Next.js.

Production Environment

In production, you should proxy some Next.js requests (requests that require no Django manipulation) through your webserver to reduce unnecessary loads on the Django server. For more information, check out our docs.

Let’s Code!

Before we start, if you are already using django-channels in your project, or you need HMR (hot module replacement) you should set up django-nextjs with django-channels. Read it from our docs.

Nextjs

Create Next.js project inside your Django project (or anywhere you want):
```
npx create-next-app
```
Run the Next.js development server:
```
npm run dev
```

The Next.js is up on port 3000, and in the / path shows the default welcome page:

Now our goal is to receive this page from a Django-powered server!

Django

Install the django-nextjs package, inside the same python environment, your Django project uses:
```
pip install django-nextjs
```

Add django_nextjs to INSTALLED_APPS in Django settings:

INSTALLED_APPS = [
    # ...
    "django_nextjs",
]

Include the django-nextjs URLs inside your root urls.py file:

# myproject/urls.py

from django.urls import include, path

urlpatterns = [
    # ...
    path("", include("myapp.urls")),
    path("", include("django_nextjs.urls")),
]

Write the next.js page view inside your app:

# myapp/views.py

from django_nextjs.render import render_nextjs_page_sync

def index(request):
    return render_nextjs_page_sync(request)

Add the new view to urls.py:

# myapp/urls.py

from django.urls import path
from .views import index

urlpatterns = [
    path("", index, name="index"),
]

Run the Django development server:
```
./manage.py runserver
```

Now we can see the Next.js page through the Django:

Notes

The URL defined in Django should match with the related Next.js page you want to show. In other words, you should get the same result when you open localhost:8000/path and localhost:3000/path.
If you need to show a Next.js page in another path in Django, feel free to use Next.js Rewrites.
You can extend Next.js pages in the Django layer if you need. Read more in django-nextjs docs.

What’s Next

You can find django-nextjs on PyPI and GitHub:

This project has been made with ❤️ and used on production for a year now. It’s pretty stable.

Check out our other projects on GitHub.
We appreciate your support.

DEV Community: Danial Keimasi

Django + Next.js The Easy Way

Introduction

Django

Next.js

How We Integrated Django + Next.js

Architecture

Development Environment

Production Environment

Let’s Code!

Nextjs

Django

Notes

What’s Next

References