Skip to content
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

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

Open
danialkeimasi opened this issue Jun 12, 2023 · 1 comment
Open

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

danialkeimasi opened this issue Jun 12, 2023 · 1 comment
Assignees
@danialkeimasi

Comments

@danialkeimasi
Copy link
Member

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!

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

No branches or pull requests
1 participant
@danialkeimasi