有没有办法将 Django 与 Next.js 集成？

Question

我通过访问 build/index.html 的函数将 Reactjs 与 Django 集成在一起。下面的代码展示了我是如何做到的。

config/urls.py

urlpatterns = [
    ...
    re_path(r'search/', react_views.ReactAppView.as_view()),
]

PROJECT_NAME/views.py

class ReactAppView(View):

    def get(self, request):
        try:
            with open(os.path.join(str(settings.BASE_DIR), 'frontend', 'build', 'index.html')) as file:
                return HttpResponse(file.read())
        except:
            return HttpResponse(
                """
                Build your React app.
                """,
                status=501,
            )

ReactAppView 函数访问 index.html，它是在 React 端使用 yarn build 创建的。基本上，我只将 React 用于搜索视图，除了搜索视图，我还使用了 jQuery，因为它最初是用 jQuery 开发的。

自从我发现我需要 Next.js 才能将服务器端渲染 (SSR) 与 React 一起使用，我一直在尝试将 React 应用程序迁移到 Next.js。但是，Next.js 没有 index.html。它只是 pages/index.js 而不是。

我非常努力地想弄清楚如何将 Django 与 Next.js 集成，但我找不到任何有用的资源。谁能帮我解决这个问题？

Answer 1

您似乎想要提供静态文件（即 React 或 Next.js 包）。 Django 有一个关于如何做到这一点的指南（来自 django.contrib.staticfiles）

最简单的示例（直接来自文档）是：

设置STATIC_FILES文件夹：

STATIC_URL = '/static/'
将 index.html 文件放在那里并将其引用为 /static/index.html。

更多关于staticfiles的内容，请参考官方文档：https://docs.djangoproject.com/en/4.0/howto/static-files/

在 Next.js 方面，您需要按照 https://nextjs.org/docs/advanced-features/static-html-export 中的示例进行操作，或者手动创建一个 index.html，其中包含您正在使用的所有 next.js 包。

Answer 2

我知道为时已晚，但 Ored 的回答不适用于 Nextjs。

当使用 React SPA 时，所有的 React 代码都将运行在客户端的浏览器上，当然在这种情况下，您只需要将 React 构建工件作为 staticfiles 提供。

但是对于使用 SSR 的 Nextjs，您需要运行 Nextjs 服务器（使用 Nodejs）并且您应该集成这两个服务器（Django 和 Nextjs）以协同工作。

因此，如果您正在开始一个新项目，您应该只使用 Django 作为 Web 服务，让 Nextjs 成为您应用程序的界面，但如果您已经有一个 Django 应用程序并想使用 Nextjs，请查看以下文章和 GitHub 回购：

有没有办法将 Django 与 Next.js 集成？

Is there a way to integrate Django with Next.js?

django

reactjs

next.js