Django-NextJS

Isomorphic UI Development with Decorator pattern for Django with:

NextJS out of the box experience for perfect frontend development,
Django support for NextJS template rendering for perfect backend development,

Run the example project

Run this commands as non root:

git clone https://git.yourlabs.org/oss/djnext
cd djnext  # all commands must be executed from repo root
pip install --user --editable .[dev]
yarn install
djnext djnext  # required for yarn dev to run
yarn dev  # run localhost:3000
djnext dev  # run localhost:8000

The purpose of the example project is to show a create form and a list page with a hardcoded menu. For complete CRUD views, autogenerated menus and so on, use CRUDLFA+.

Install in your project

Install NextJS

In your repo root, install NextJS which means adding these dependencies:

yarn add nextjs react react-dom

And this commands to your package.json:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Then you can run yarn dev.

That was the first step of the NextJS tutorial.

Install DjNext

Install djnext with pip for example: pip install --user djnext
Then, add urls for /_next: path('_next', include('djnext.urls')),
Then add djnext to INSTALLED_APPS.
Run manage.py djnext

It will automatically setup the template backend if you haven't yourself. This allows picking up React templates in JS from django.

While you run yarn dev, you also need to run the djnext management command to maintain the NextJS pages directory with the static/pages directory of every INSTALLED_APPS.

This will watch static/pages directories of all apps in INSTALLED_APPS, and build the pages/ directory, so that yarn dev will find it.

If you want to setup the template backend yourself and override options you can do as such:

TEMPLATES = [
    {
        'BACKEND': 'djnext.backend.Backend',
        'OPTIONS': {
            'NEXTJS_DSN': 'http://localhost:3000',  # default: from env var
            'context_processors': [
                'djnext_example.artist.context_processors.menu',
            ]
        },
    }
]

The above adds a context processor that will recieve the request as first argument if the django-threadlocals middleware is installed, otherwise None. In return, the context processor function must return a dict that will be merged to the template context before being serialized and sent to the NextJS server.

Tutorial

NextJS template engine

Example project lives in src/djnext_example, see src/djnext_example/artist/urls.py:

CreateView.as_view(
    model=Artist,
    fields=['name'],
    success_url=reverse_lazy('artist_list'),
    template_name='create.js',
)

The template backend queries the NextJS render server, because the djnext command exposed components/*js and pages/*js from your INSTALLED_APPS to NextJS.

Note

For development, you need both yarn dev and manage.py djnext.

Troubbleshooting

Try rm -rf node_modules .next pages && yarn install && manage.py djnext & yarn dev to start the NextJS server from a fresh install.

Authors

Frontend research: Thomas Binetruy <tbinetruy@yourlabs.org>
Backend research: James Pic <jpic@yourlabs.org>

yourlabs / djnext