Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 25, 2022 06:57 pm GMT

Django Next.js The Easy Way

Introduction

After reading this article, you can create or enhance your projects using the many convenient features of Next.js and Django.

Using React instead of a Django template to create your frontend gives you access to many existing modern tools without the SEO issues of a SPA (Single Page Application) thanks to Next.js SSR capability.

Youll also learn how to add Next.js to your existing Django project without any hassle, using django-nextjs.

Django

Django is a popular and fully featured server-side web framework, written in Python.

Next.js

Next.js is an open-source development framework built on top of Node.js, enabling React-based web applications functionalities such as server-side rendering and generating static websites.

How We Integrated Django + Next.js

There are several approaches to using these two frameworks together, but we are using one of them.

We are going to run Django and Next.js servers at the same time, use Django to accept web requests and use Next.js as an internal service that generates the HTML.

Accordingly, Django handles web requests, and for each request, Next.js is called inside the Django view to get the HTML response.

This is perfect if you already have a Django project, and you dont want to change anything and just start using Next.js with it!

You can use this approach even if you are starting a new project because youll be able to use more Django features (e.g. sessions).

Architecture

You can use django-nextjs in both development and production environments easily:

Development Environment

When you run the project with ./manage.py runserver, you are using Django as a proxy for all the requests between you and Next.js.

Development  django-nextjs

Production Environment

In production, you should proxy some Next.js requests (requests that require no Django manipulation) through your webserver to reduce unnecessary loads on the Django server. For more information, check out our docs.

Production  django-nextjs

Lets Code!

Before we start, if you are already using django-channels in your project, or you need HMR (hot module replacement) you should set up django-nextjs with django-channels. Read it from our docs.

Nextjs

  • Create Next.js project inside your Django project (or anywhere you want):

    npx create-next-app
  • Run the Next.js development server:

    npm run dev

The Next.js is up on port 3000, and in the / path shows the default welcome page:

The Next.js welcome page on port 3000

Now our goal is to receive this page from a Django-powered server!

Django

  • Install the django-nextjs package, inside the same python environment, your Django project uses:

    pip install django-nextjs
  • Add django_nextjs to INSTALLED_APPS in Django settings:

    INSTALLED_APPS = [    # ...    "django_nextjs",]
  • Include the django-nextjs URLs inside your root urls.py file:

    # myproject/urls.pyfrom django.urls import include, pathurlpatterns = [    # ...    path("", include("myapp.urls")),    path("", include("django_nextjs.urls")),]
  • Write the next.js page view inside your app:

    # myapp/views.pyfrom django_nextjs.render import render_nextjs_page_syncdef index(request):    return render_nextjs_page_sync(request)
  • Add the new view to urls.py:

    # myapp/urls.pyfrom django.urls import pathfrom .views import indexurlpatterns = [    path("", index, name="index"),]
  • Run the Django development server:

    ./manage.py runserver

Now we can see the Next.js page through the Django:

The Next.js welcome page from the Django development server on port 8000

Notes

  • The URL defined in Django should match with the related Next.js page you want to show. In other words, you should get the same result when you open localhost:8000/path and localhost:3000/path.

  • If you need to show a Next.js page in another path in Django, feel free to use Next.js Rewrites.

  • You can extend Next.js pages in the Django layer if you need. Read more in django-nextjs docs.

Whats Next

You can find django-nextjs on PyPI and GitHub:

This project has been made with and used on production for a year now. Its pretty stable.

Check out our other projects on GitHub.
We appreciate your support.

References


Original Link: https://dev.to/danialkeimasi/django-nextjs-the-easy-way-5a0h

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To