Customizing the HTML Response: Fix hydration error with Nextjs 13+ app router

How to Reproduce

In Nextjs 13+, customize the root layout in app directory:

// app/layout.jsx (or .tsx)
...
<body id="__django_nextjs_body" className={inter.className}>
  <div id="__django_nextjs_body_begin" />
  {children}
  <div id="__django_nextjs_body_end" />
</body>
...

Write a django template that extends 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 %}

Pass the template name to render_nextjs_page:

async def jobs(request):
    return await render_nextjs_page(request, "path/to/template.html")

QueraTeam / django-nextjs

Customizing the HTML Response: Fix hydration error with Nextjs 13+ app router #22

How to Reproduce