django 和nextjs

Django 是一种流行且功能齐全的服务器端 Web 框架，用 Python 编写。Next.js 是一个建立在 Node.js 之上的开源开发框架，支持基于 React 的 Web 应用程序功能，例如服务器端渲染和生成静态网站。

大体逻辑是： 在同一台服务器上运行 2 个端口。一个用于 django（面向公众），一个用于 Next.js（内部）。让 django 处理所有的网络请求。对于每个请求，从 django 视图查询 Next.js 以获得 HTML 响应。从 Django 视图返回准确的 HTML 响应。

首先安装django-nextjs

pip install django-nextjs

Add django_nextjs to INSTALLED_APPS in Django:

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

设置url

# myproject/urls.py
from django.urls import include, path
urlpatterns = [
    # ...
    path("", include("myapp.urls")),
    path("", include("django_nextjs.urls")),
]

撰写views

# myapp/views.py
from django_nextjs.render import render_nextjs_page_sync
def index(request):
    return render_nextjs_page_sync(request)

将views写入url

# myapp/urls.py
from django.urls import path
from .views import index
urlpatterns = [
    path("", index, name="index"),
]

django-nextjs PyPI 和 GitHub:

https://pypi.org/project/django-nextjs/
https://github.com/QueraTeam/django-nextjs

参考文章：
How and why you should use Next.js with Django

当前方案便于开发中调试使用，建议实际部署中还是导出nextjs代码为静态。

方案2

这里就是将nextjs代码导出为html和js，然后引入。
导出
npm run build
将导出的代码复制到/opt/app/myapp/frontend目录下，修改nginx 配置文件

server {
    listen 8020;
    #server_name example.org;

    location = /favicon.ico { access_log off; log_not_found off; }

    location / {
        proxy_pass http://127.0.0.1:8010;
        proxy_set_header Host $host;
        proxy_set_header        X-NginX-Proxy   true;
        proxy_set_header        Upgrade         $http_upgrade;
        proxy_pass_header       Set-Cookie;

        proxy_set_header X-Forwarded-Host $host;
        #proxy_set_header X-Forwarded-Host 127.0.0.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /static {
        # 这里需要修改
        root /opt/app/myapp;
    }
    location /_next {
        # 这里需要修改
        root /opt/app/myapp/frontend;
    }
}

ok这样就可以了。