如何将 nextjs 与 Django 一起使用

Question

我开始使用Python编码，当我上网时，我开始了解Django。我使用它非常好并且更容易编辑，因为它动态生成页面。现在，我正在探索nodejs和nextjs框架。

我认为这是 Django 和 Nextjs 的良好结合，这样我可以获得速度和安全性。我想知道如何将 nextjs 集成到 Django 中。

Answer 1

我将解释如何使用 django python 作为后端，而 next js 用于前端。

您需要使用 npx create-next-app@latest 和 django-admin startproject 在各自的文件夹中设置 next js 和 django 项目。

在 Django 项目中

1. 创建您想要使用的应用程序并在设置中注册它们。
2. 创建相关模型、模式和视图，并将 url 指向项目 url。
3. 在django的数据库中输入一些你想要显示给你的网站的数据（默认是sqlite） 确保您的数据可以在 django localhost 8000 中看到，并且最好使用 JSON 格式，因为这使得在 nextjs 中更容易

允许 Next Js 连接到 Django 4. 安装 django cors 标头 (https://pypi.org/project/django-cors-headers/)。 Cors 标头用于向后端公开允许的站点，在本例中为 next js，它在开发中的本地主机 3000 上运行。

在settings.py中， 4.1 安装的应用程序包括 corsheaders

INSTALLED_APPS = [
    ...,
    "corsheaders",
    ...,
]

4.2 包含中间件如下：

MIDDLEWARE = [
    ...,
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
    ...,
]

4.3 包括允许的来源如下

CORS_ALLOWED_ORIGINS = [
    "https://example.com", #use this in production to point to live website
    "https://sub.example.com", #use this in production
    "http://localhost:3000", #default next js on localhost, otherwise 3001
    "http://127.0.0.1:3000", #still next js development
]

下一个 JS 项目。 让我们尝试从 django 后端获取一些数据并显示在 localhost 3000

1. 例如在 page.js 、 page.jsx 或 page.tsx （主页默认值）中

    "use client";
   

   导出默认函数 Home() { 异步函数 getDjangoAPIData() { const 响应 = 等待 fetch("http://127.0.0.1:8000/api/hello"); const data =等待response.json(); 控制台.log(数据); } 异步函数handleClick() { 等待 getDjangoAPIData(); } 返回 （ 查找数据 ）； }

说明如下： -我们声明使用客户端，因为这是按下按钮的客户端操作 - fetch api 是我们用来收集数据的异步函数。 -我们在链接中指向我们的 django 项目以及从中获取 json 数据的 django url。 - 当以 JSON 形式检索数据并将数据记录在控制台上时，需要等待异步函数。 -标有“查找数据”的按钮触发获取数据的动作

谢谢你。在示例中，我使用的是 Ninja Api，但您可以使用 Fast Api 或 Django Rest Framework