Django with Next.js

A Simple Django backend deployed along side with a Nextjs frontend.

Stack

• Nextjs - The React Framework for the Web.
• Django - Django makes it easier to build better web apps more quickly and with less code.
• Tailwind css - Rapidly build modern websites without ever leaving your HTML.
• Typescript - JavaScript with syntax for types.

Deployed Routes:

• Home Route - "/"
• Date Route - "/api/date/"
• Django Template - "/api/sample/"
• Hello - "/api/hello/"
• About Page - "/about/"

Project structure

$PROJECT_ROOT
│   
├── backend,api # django files
│   
├── src, public # nextjs files
│   
├── templates # django templates
│   
├── static # django static files

---

Get the Code

For Backend

• Clone Repo

mkdir django-nextjs
cd django-nextjs
git clone https://github.com/Arvind-4/django-nextjs.git .

• Create Virtual Environment for Python

python3.10 -m pip install virtualenv
python3.10 -m virtualenv .

• Activate Virtual Environment

source bin/activate

• Install Dependencies (Via pip)

pip install -r requirements.txt

• Install Dependencies (Via Poetry)

pip install poetry
poetry install

• Make Migrations

python manage.py makemigrations
python manage.py migrate

• Run Server

python manage.py runserver

For Frontend

• Install Dependencies

pnpm i

• Run Frontend

pnpm dev