django nextjs
Version 3.2.0
Next.js Integração para projetos de Django.
Então você deseja usar o Django e o Next.js em seu projeto. Existem dois cenários:
Você está iniciando um novo projeto e deseja usar o Django como back-end e Next.js como front-end. O Django serve apenas solicitações de API. Todo o código do front-end vive no próximo.js e você não escreve nenhum modelo de django.
Nesse cenário, você não precisa deste pacote (embora possa usá -lo). Você simplesmente inicia os servidores Django e Next.JS e aponta seu servidor público da Web para Next.JS.
Você precisa dos dois modelos de Django e Next.Js ao mesmo tempo e essas páginas devem facilmente vincular -se. Talvez você tenha um projeto Django existente, que tenha páginas renderizadas pelo modelo Django e deseja algumas novas páginas em Next.JS. Ou você deseja migrar seu front-end para Next.js, mas como o projeto é grande, você precisa fazê-lo gradualmente.
Nesse cenário, este pacote é para você!
De um comentário sobre o StackOverflow:
Execute 2 portas no mesmo servidor. Um para django (face público) e outro para o próximo.js (interno). Deixe o Django lidar com todas as solicitações da Web. Para cada solicitação, consulte o próximo.js do Django View para obter a resposta HTML. Retorne essa resposta exata em HTML da View Django.
Instale a versão mais recente do Pypi.
pip install django-nextjs Adicione django_nextjs.apps.DjangoNextJSConfig para INSTALLED_APPS .
Configure os URLs do próximo.js, dependendo do seu ambiente.
Se você está servindo seu site no ASGI durante o desenvolvimento, use canais django e adicione NextJSProxyHttpConsumer , NextJSProxyWebsocketConsumer para asgi.py como o exemplo a seguir.
NOTA: Recomendamos o uso de canais ASGI e Django, porque é necessário para que a atualização rápida (substituição do módulo quente) funcione corretamente no NextJS 12+.
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 )),
# ...
}
) Caso contrário (se servir sob o WSGI durante o desenvolvimento), adicione o seguinte ao início do urls.py :
path ( "" , include ( "django_nextjs.urls" )) AVISO: Se você está servindo sob asgi, não adicione isso ao seu urls.py Pode causar impasse.
Na produção, use um proxy reverso como Nginx ou Caddy:
| Url | Ação |
|---|---|
/_next/static/... | Sirva NEXTJS_PATH/.next/static Directory |
/_next/... | Proxy para http://localhost:3000 |
/next/... | Sirva NEXTJS_PATH/public/next Directory |
Exemplo de configuração para nginx:
location /_next/static/ {
alias NEXTJS_PATH/.next/static/;
expires max;
add_header Cache-Control "public";
}
location /_next/ {
proxy_pass http://127.0.0.1:3000;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /next/ {
alias NEXTJS_PATH/public/next/;
expires max;
add_header Cache-Control "public";
}
Start Next.js Server:
# Development:
$ npm run dev
# Production:
$ npm run build
$ npm run startComece desenvolvendo suas páginas no Next.js e, em seguida, defina um URL do Django para cada página Next.js. Aqui está um exemplo de como você pode fazer isso:
from django_nextjs . views import nextjs_page
urlpatterns = [
path ( "/nextjs/page" , nextjs_page (), name = "nextjs_page" ),
]Mesmo que não seja recomendado, às vezes pode ser necessário adicionar algumas etapas personalizadas antes de mostrar uma página Next.js no Django. No entanto, aconselhamos mover essa lógica para o Next.js para garantir que ela seja aplicada mesmo durante os redirecionamentos do lado do cliente . Se você se encontrar nessa situação, poderá criar uma visão assíncrona para cada página, conforme demonstrado abaixo:
from django_nextjs . render import render_nextjs_page
async def jobs ( request ):
# Your custom logic
return await render_nextjs_page ( request )Você pode modificar o código HTML que Next.js retorna no seu código Django.
Evitar o código duplicado para o marinho e o rodapé é um caso de uso comum para isso se você estiver usando os modelos Next.js e Django. Sem ele, você teria que escrever e manter duas versões separadas do seu marinho e rodapé (uma versão do modelo Django e uma versão Next.js). No entanto, você pode simplesmente criar um modelo de Django para o seu Navbar e inserir seu código no início da tag <body> retornado de Next.js.
Para ativar esse recurso, você precisa personalizar o documento e o layout root no Next.js e fazer os seguintes ajustes:
id="__django_nextjs_body" como o primeiro atributo do elemento <body> .<div id="__django_nextjs_body_begin" /> como o primeiro elemento dentro <body> .<div id="__django_nextjs_body_end" /> como o último elemento dentro <body> .Nota: Atualmente, a personalização HTML não está funcionando com o roteador de aplicativos (Next.js 13+).
Leia este documento e personalize seu documento Next.js:
// pages/_document.jsx (or .tsx)
...
< body id = "__django_nextjs_body" >
< div id = "__django_nextjs_body_begin" />
< Main />
< NextScript />
< div id = "__django_nextjs_body_end" />
</ body >
. . . Escreva um modelo de django que estende django_nextjs/document_base.html :
{% extends "django_nextjs/document_base.html" %}
{% block head %}
<!-- ... the content you want to place at the beginning of "head" tag ... -->
{{ block.super }}
<!-- ... the content you want to place at the end of "head" tag ... -->
{% endblock %}
{% block body %}
... the content you want to place at the beginning of "body" tag ...
... e.g. include the navbar template ...
{{ block.super }}
... the content you want to place at the end of "body" tag ...
... e.g. include the footer template ...
{% endblock %} Passe o nome do modelo para nextjs_page ou render_nextjs_page :
from django_nextjs . render import render_nextjs_page
from django_nextjs . views import nextjs_page
async def jobs ( request ):
return await render_nextjs_page ( request , template_name = "path/to/template.html" )
urlpatterns = [
path ( "/nextjs/page" , nextjs_page ( template_name = "path/to/template.html" ), name = "nextjs_page" ),
path ( "/jobs" , jobs , name = "jobs_page" )
]public do Next.js, esse arquivo deve estar em public/next subdiretório para funcionar corretamente.APPEND_SLASH = False nos settings.py do seu projeto Django.py. Além disso, não adicione / no final dos caminhos do NextJS no urls.pyConfigurações padrão:
NEXTJS_SETTINGS = {
"nextjs_server_url" : "http://127.0.0.1:3000" ,
"ensure_csrf_token" : True ,
}nextjs_server_url O URL do Next.js Server (iniciado pelo npm run dev ou npm run start )
ensure_csrf_token Se o usuário não tiver um token CSRF, verifique se alguém é gerado e incluído na solicitação inicial ao próximo.js servidor chamando django.middleware.csrf.get_token do Django.middleware.csrf.get_token. Se django.middleware.csrf.CsrfViewMiddleware estiverem instalados, a resposta inicial incluirá um cabeçalho Set-Cookie para persistir o valor do token CSRF no cliente. Esse comportamento é ativado por padrão.
ensure_csrf_token ? Pode ser necessário emitir solicitações de postagem grafql para buscar dados no próximo.js getServerSideProps . Se essa for a primeira solicitação do usuário, não haverá cookie CSRF, fazendo com que a solicitação falhe, pois o GraphQL usa a postagem mesmo para buscar dados. No entanto, desde que as funções getServerSideProps sejam livres de efeito colateral (ou seja, elas não usam métodos inseguros HTTP ou mutações grafql), isso deve ficar bem em uma perspectiva de segurança. Leia mais aqui.
pip install -e '.[dev]'pre-commit install . Mit
