Next.js + Django Boilerplate

This is a Next.js project bootstrapped with create-next-app and integrated with a Django backend.

Tech Stack

Frontend

• Framework: Next.js
• Language: TypeScript
• Styling: Tailwind CSS
• Font Optimization: next/font

Backend

• Framework: Django
• Language: Python
• Database: SQLite (default, can be replaced with other databases)

Features

• Frontend:
  • Server-side rendering with Next.js.
  • API integration using Redux Toolkit Query.
  • Responsive design with Tailwind CSS.
  • Modular and scalable folder structure.
• Backend:
  • REST API built with Django and Django REST Framework.
  • CORS support for seamless frontend-backend communication.
  • SQLite database for development (easily replaceable for production).

Project Structure

nextjs_django_boilerplate/
├── backend/                # Django backend
│   ├── api/                # Django app for API
│   ├── backend/            # Django project settings
│   └── db.sqlite3          # SQLite database (for development)
├── src/                    # Next.js frontend
│   ├── app/                # App directory (Next.js pages)
│   ├── lib/                # Shared utilities (store, API, types)
│   └── styles/             # Global styles
├── public/                 # Static assets
├── .gitignore              # Git ignore rules
├── package.json            # Frontend dependencies
├── tsconfig.json           # TypeScript configuration
└── README.md               # Project documentation

Getting Started

Prerequisites

• Node.js: Install Node.js (v18 or higher recommended).
• Python: Install Python (v3.10 or higher recommended).
• Package Manager: Use npm, yarn, or pnpm for frontend dependencies.

Backend Setup

1. Navigate to the backend folder:

   cd backend
   

2. Install Dependencies:

   pip install -r requirements.txt
   

3. Apply migrations:

   python manage.py migrate
   

4. Start the Django development server:

   python manage.py runserver
   

5. The backend will be available at http://localhost:8000.

Frontend Setup

1. Navigate to the root folder of this project.

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install
   

3. Start the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   

4. Open http://localhost:3000 with your browser to view the app.

5. Set the environment variable for API URL:

   NEXT_PUBLIC_API_URL=http://localhost:8000/api
   

You can start editing the page by modifying src/app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about the technologies used in this project, check out the following resources:

[https://nextjs.org/docs](Next.js Documentation) - Learn about Next.js features and API. [https://docs.djangoproject.com/en/stable/](Django Documentation) - Learn about Django features and API. [https://tailwindcss.com/docs](Tailwind CSS Documentation) - Learn about Tailwind CSS utilities. [https://redux-toolkit.js.org/rtk-query/overview](Redux Toolkit Query) - Learn about RTK Query for API integration.

Deployment

Frontend

The easiest way to deploy your Next.js app is to use Vercel. Follow the Next.js deployment documentation for more details.

Alternatively, you can use Cloudflare Pages to host your Next.js app. Cloudflare Pages provides a fast, globally distributed platform for deploying static and server-rendered applications. It is particularly advantageous if you are already using Cloudflare for DNS or other services, as it integrates seamlessly with their ecosystem. Additionally, Cloudflare's global CDN ensures low latency and high performance for users worldwide. Refer to the Cloudflare Pages documentation for setup instructions.

Backend

You can deploy the Django backend using platforms like:

• Heroku
• AWS
• DigitalOcean

Ensure you:

1. Configure the database for production (e.g., PostgreSQL or MySQL).
2. Set up the required environment variables (e.g., SECRET_KEY, DATABASE_URL, etc.).
3. Use a production-ready web server like Gunicorn or uWSGI.

License

This project is licensed under the MIT License. See the LICENSE file for more information.