Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
danialkeimasi opened this issue Jun 12, 2023 · 2 comments · May be fixed by #37
Open

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

danialkeimasi opened this issue Jun 12, 2023 · 2 comments · May be fixed by #37
Assignees
@danialkeimasi

Comments

@danialkeimasi
Copy link
Contributor

danialkeimasi commented Jun 12, 2023 •
edited
Loading

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")
@danialkeimasi danialkeimasi changed the title Bypass hydration error with Nextjs 13+ app router Customizing the HTML Response: Fix hydration error with Nextjs 13+ app router Jun 12, 2023
@danialkeimasi danialkeimasi self-assigned this Aug 30, 2023
@ghost
Copy link

ghost commented Sep 12, 2023

Very excited for this feature!

@mjnaderi mjnaderi linked a pull request Apr 7, 2025 that will close this issue
Open
@mjnaderi mjnaderi linked a pull request Apr 8, 2025 that will close this issue
Add streaming support for Next.js App Router #37
Open
@danialkeimasi
Copy link
Contributor Author

danialkeimasi commented Apr 8, 2025 •
edited
Loading

Related to #37

Since React is rendered on the root <html> tag when using App router, we can't safely manipulate the HTML without risking hydration errors. We've decided it's best not to interfere with the HTML structure, so we've dropped support for HTML customization when using the App Router. As a result, passing a template_name is not supported when using stream_nextjs_page.

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@danialkeimasi danialkeimasi

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add streaming support for Next.js App Router QueraTeam/django-nextjs
1 participant
@danialkeimasi