Next.js + Django integration
Project description
Django Next.js
Django + Next.js integration
From a comment on StackOverflow:
Run 2 ports on the same server. One for django (public facing) and one for Next.js (internal). Let django handle all web requests. For each request, query Next.js from django view to get HTML response. Return that exact HTML response from django view.
Installation
-
Install the latest version from PyPI.
pip install django-nextjs
-
Add
django_nextjs.apps.DjangoNextJSConfigtoINSTALLED_APPS. -
In Development Environment:
-
If you're using django channels (after Nextjs v12 you need this to be able to use hot-reload), add
NextJSProxyHttpConsumerandNextJSProxyWebsocketConsumertoasgi.py:import os from django.core.asgi import get_asgi_application from django.urls import re_path, path os.environ.setdefault("DJANGO_SETTINGS_MODULE", "myproject.settings") django_asgi_app = get_asgi_application() from channels.auth import AuthMiddlewareStack from channels.routing import ProtocolTypeRouter, URLRouter from django_nextjs.proxy import NextJSProxyHttpConsumer, NextJSProxyWebsocketConsumer from django.conf import settings # put your custom routes here if you need http_routes = [re_path(r"", django_asgi_app)] websocket_routers = [] if settings.DEBUG: http_routes.insert(0, re_path(r"^(?:_next|__next|next).*", NextJSProxyHttpConsumer.as_asgi())) websocket_routers.insert(0, path("_next/webpack-hmr", NextJSProxyWebsocketConsumer.as_asgi())) application = ProtocolTypeRouter( { # Django's ASGI application to handle traditional HTTP and websocket requests. "http": URLRouter(http_routes), "websocket": AuthMiddlewareStack(URLRouter(websocket_routers)), # ... } )
-
Otherwise, add the following to the beginning of
urls.py:path("", include("django_nextjs.urls"))
-
-
In Production:
-
Use a reverse proxy like nginx:
URL Action /_next/static/...Serve NEXTJS_PATH/.next/staticdirectory/_next/...Proxy to http://localhost:3000/next/...Serve NEXTJS_PATH/public/nextdirectoryPass
x-real-ipheader when proxying/_next/:location /_next/ { proxy_set_header x-real-ip $remote_addr; proxy_pass http://127.0.0.1:3000; }
-
Usage
Start Next.js server:
# Development:
$ npm run dev
# Production:
$ npm run build
$ npm run start
Develop your pages in Next.js. Write a django URL and view for each page like this:
# If you're using django channels
from django.http import HttpResponse
from django_nextjs.render import render_nextjs_page_async
async def jobs(request):
return await render_nextjs_page_async(request)
# If you're not using django channels
from django.http import HttpResponse
from django_nextjs.render import render_nextjs_page_sync
def jobs(request):
return render_nextjs_page_sync(request)
Customizing Document
If you want to customize the HTML document (e.g. add header or footer), read this section.
You need to customize Next's document:
- Add
id="__django_nextjs_body"as the first attribute of<body>element. - Add
<div id="__django_nextjs_body_begin" />as the first element inside<body>. - Add
<div id="__django_nextjs_body_end" />as the last element inside<body>.
import Document, { Html, Head, Main, NextScript } from "next/document";
// https://nextjs.org/docs/advanced-features/custom-document
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body id="__django_nextjs_body" dir="rtl">
<div id="__django_nextjs_body_begin" />
<Main />
<NextScript />
<div id="__django_nextjs_body_end" />
</body>
</Html>
);
}
}
export default MyDocument;
Write a django template that extends django_nextjs/document_base.html:
{% extends "django_nextjs/document_base.html" %}
{% block head %}
... the content you want to add to the beginning of <head> tag ...
{{ block.super }}
... the content you want to add to the end of <head> tag ...
{% endblock %}
{% block body %}
... the content you want to add to the beginning of <body> tag ...
{{ block.super }}
... the content you want to add to the end of <body> tag ...
{% endblock %}
Pass the template name to render_nextjs_page_async or render_nextjs_page_sync:
# If you're using django channels
async def jobs(request):
return await render_nextjs_page_async(request, "path/to/template.html")
# If you're not using django channels
def jobs(request):
return render_nextjs_page_sync(request, "path/to/template.html")
Notes
- If you want to add a file to
publicdirectory of Next.js, that file should be inpublic/nextsubdirectory to work correctly. - If you're using django channels, make sure all your middlewares are async-capable.
Settings
Default settings:
NEXTJS_SETTINGS = {
"nextjs_server_url": "http://127.0.0.1:3000",
}
nextjs_server_url
The URL of Next.js server (started by npm run dev or npm run start)
Development
- Install development dependencies in your virtualenv with
pip install -e '.[dev]' - Install pre-commit hooks using
pre-commit install.
References
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file django-nextjs-2.2.0.tar.gz.
File metadata
- Download URL: django-nextjs-2.2.0.tar.gz
- Upload date:
- Size: 10.5 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.7.1 importlib_metadata/4.8.3 pkginfo/1.8.3 requests/2.28.1 requests-toolbelt/0.9.1 tqdm/4.62.3 CPython/3.10.7
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
aca8d270300722011192af186984a400d1152fa5d748e50ed92360e2418c0ef9
|
|
| MD5 |
9b6e169557085a9bb6aa280c64a95913
|
|
| BLAKE2b-256 |
0685c5288227ef82d63ac5640baaf85310090c0f7bced34af73f41a44e39b247
|
File details
Details for the file django_nextjs-2.2.0-py3-none-any.whl.
File metadata
- Download URL: django_nextjs-2.2.0-py3-none-any.whl
- Upload date:
- Size: 9.3 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.7.1 importlib_metadata/4.8.3 pkginfo/1.8.3 requests/2.28.1 requests-toolbelt/0.9.1 tqdm/4.62.3 CPython/3.10.7
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
f2958be42bf3c723b3b1654756335f898722afca0a6e54dbf5c7f1bac7f33d56
|
|
| MD5 |
aed1689a8eb9a174fc0b84c121a6d5a0
|
|
| BLAKE2b-256 |
1252d592466b8333e44a246a525ddeb8a216de57b3edeedf2cbaf0ab72e65a10
|
