Next.js 中的 Django {% block %} 和 {% extends %} 标签的等价物是什么？答案

【问题标题】：What is the equivalent of the Django {% block %} and {% extends %} tags in Next.js?Next.js 中的 Django {% block %} 和 {% extends %} 标签的等价物是什么？
【发布时间】：2021-01-17 03:56:05
【问题描述】：

我正在通过在单独的 Next.js 应用程序中重新创建其前端来现代化我的 Django Web 应用程序的代码。我在 Next.js 中查找 Django {% block %} 标记的等效项时遇到问题。

具体来说，我的应用程序中的所有页面都共享以下 HTML 框架：顶部的导航栏，下方的主栏和侧边栏。

在 Django 中，我使用包含导航栏、{% block mainbar %} 标记和 {% block sidebar %} 标记的 base.html 文件实现了这一点，然后使用 {% extends 这个模板从其他子模板扩展"base.html %}。这是我的 Django base.html：

<body>

    <!-- Navbar -->
    <header id="navbar">
        ...
    </header>

    <!-- Body -->
    <div id="body">

        <!-- Mainbar -->
        <main id="mainbar">
            {% block mainbar %}
            {% endblock %}
        </main>

        <!-- Sidebar -->
        <aside id="sidebar">
            {% block sidebar %}
            {% endblock %}
        </aside>

    </div>

</body>

如何在 Next.js 中重新创建 {% block %} 和 {% extends %} 标记的概念？或者，如何重新创建类似于上述的模板继承结构？

【问题讨论】：

标签： reactjs django next.js

【解决方案1】：

正如你所说，

在单独的 Next.js 应用程序中重新创建其前端

我假设您尝试将 Django 框架用于后端并使用 Next.js 用于前端？

如果您将 Django 用作 Web 服务，您就可以做到这一点。意味着您的 Django 将使用 API 向其前端提供数据。

对于您的问题，在 NextJS 中导入组件非常简单。

import Mainbar from '../components/mainbar'
import Sidebar from '../components/sidebar'

export default function Index() {
  return (
    <div id="body">
      <Mainbar />
      <Sidebar />
    </div>
  )
}

完整的例子可以参考here

【讨论】：