Quasi sapiente voluptates aut minima non doloribus similique quisquam. In quo expedita ipsum nostrum corrupti incidunt. Et aut eligendi ea perferendis.

Installation Guide

This guide provides step-by-step instructions to set up Next-DRF, the full-stack framework combining Next.js and Django Rest Framework (DRF). Follow the steps below to get your project up and running in no time.

Prerequisites

Ensure the following tools are installed on your machine before starting:

1. Node.js: Version 20 or later
   Download Node.js
2. Python: Version 3.9 or later
   Download Python
3. npm: Comes with Node.js
4. pip: Comes with Python

Installation Steps

Step 1: Create a New Project

Run the following command to scaffold a new Next-DRF project:

npx next-drf@latest my-next-drf-project

This command will generate the project structure as shown below:

my-next-drf-project/
├── next-frontend/    # Next.js frontend application
├── drf-backend/      # Django Rest Framework backend
├── scripts/          # CLI automation scripts
└── README.md         # Project documentation

Step 2: Navigate to the Project Directory

Change into the newly created project directory:

cd my-next-drf-project

Step 3: Install Dependencies

Install Frontend Dependencies

Navigate to the next-frontend directory and install all required packages:

npm install --prefix next-frontend

Install Backend Dependencies

Run the following script to install the backend dependencies in one step:

npm run setup:backend

Step 4: Start the Development Environment

To run both the frontend and backend simultaneously, use the following command:

npm run dev

• The frontend will be available at: http://localhost:3000
• The backend API will be available at: http://localhost:8000

Available Commands

Development Commands

Run Frontend Only:

npm run dev:frontend

Run Backend Only:

npm run dev:backend

Make Migrations (Backend):

npm run dev:makemigrations

Apply Migrations (Backend):

npm run dev:migrate

Create a New Django App:

npm run startapp

Build and Deployment Commands

Build Entire Project:

npm run build

Build Frontend Only:

npm run build:frontend

Build Backend Static Files:

cd drf-backend
python manage.py collectstatic --noinput

Run Production Servers:

npm run start

• Frontend: http://localhost:3000
• Backend: http://localhost:8000

Verifying Installation

To confirm your installation is working correctly:

• Frontend: Open http://localhost:3000 to view the Next.js starter page.
• Backend: Open http://localhost:8000 to verify the DRF API.

Notes and Tips

• Environment Variables: Both frontend and backend can share environment variables through .env files.
• Custom Scripts: Add additional commands to package.json for custom workflows.
• Error Handling: Check logs if the server doesn’t start correctly.
• Authentication: The project includes a prebuilt authentication layer that supports Auth0, AWS Cognito, Custom JWT, Firebase, and Okta.

You’re now ready to build powerful full-stack applications with Next-DRF! 🚀

Key Elements of the Page

• Markdown Headers: Clear sections for each part of the installation guide.
• Code Blocks: Proper formatting for command examples.
• Lists and Formatting: Used bullet points and headings for improved readability.
• Internal Links: URLs are included for easy verification of installation.

Feel free to let me know if there's anything else you'd like to add or change! 😊