Django + Next.js Template

Django + Nextjs Template: Standardised CFC Tech Stack

---

Prerequisites

• Node.js 18+ and npm - Download here
• uv 0.8+ (Python package manager) - Installation guide -- Next.js use this command in bash npm install -g next

Installation Steps

1. Clone the Repository

git clone <your-repo-url>
cd <project-name>

2. Install Prerequisites

MacOS:

brew install uv 

Ubuntu

apt install astral-uv

Otherwise, look at the installation guide

3. Set Up Environment Variables

Before proceeding, create your environment files by copying the examples:

cp ./client/.env.example ./client/.env && cp ./server/.env.example ./server/.env

4. Set Up the Backend (Django)

cd server
uv sync
source .venv/bin/activate
python manage.py migrate
python manage.py createsuperuser  
python manage.py runserver

Backend (.env in server/)

APP_NAME=DjangoAPI
APP_ENV=DEVELOPMENT
API_SECRET_KEY=your-secret-key-here
API_ALLOWED_HOSTS=.localhost 127.0.0.1 [::1]

POSTGRES_HOST=localhost
POSTGRES_NAME=your_db_name
POSTGRES_USER=your_username
POSTGRES_PASSWORD=your_password
POSTGRES_PORT=5432

DJANGO_SUPERUSER_PASSWORD=Password123
DJANGO_SUPERUSER_EMAIL=[email protected]
DJANGO_SUPERUSER_USERNAME=admin

FRONTEND_URL=http://localhost:3000

Frontend (.env in client/)

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

6. Set Up the Frontend (Next.js)

cd client
npm install
npm run dev

7. Verify Installation

• Frontend: http://localhost:3000
• Backend API: http://localhost:8000
• Admin panel: http://localhost:8000/admin

---

Development Commands

Backend (Django)

cd server

# Run development server
python manage.py runserver

# Create migrations
python manage.py makemigrations

# Apply migrations
python manage.py migrate

# Create superuser
python manage.py createsuperuser

# Run tests
python manage.py test

# Reset database (nuclear option)
./nuke.sh

Frontend (Next.js)

cd client

### Start development server ###
# Development server
npm run dev

### Start production server ###
# Build for production
npm run build

# Start production server
npm start

### Checks for code problems ### 
# Run linting
npm run lint

### Fix found code problems ###
# Fix linting issues
npm run lint:fix

### Checks for typescript issues ###
# Type checking
npm run typecheck

### Formats code, Technically its the Prettier extension ###
# Format code
npm run format

---

Server

Create and run migrations

If the models are updated, be sure to create a migration:

python manage.py makemigrations # create migration
python manage.py migrate # apply migrations

Nuke the DB

If you run into migration conflicts that you can't be bothered to fix, run nuke.sh to clear your database. Then, run migrations again.

Other

Update Dependencies

You can run npm install and uv sync in the respective client and server folders to install the newest dependencies.

Changing env vars

Edit the .env file in the respective directory (client or server).