How to Integrate Next.js with Django: A Step-by-Step Guide

## Introduction

By combining [Next.js](https://nextjs.org/) and [Django](https://www.djangoproject.com/), you can take use of both frameworks' strengths: Next.js provides a quick, server-rendered frontend, while Django offers a stable backend. In this tutorial, we'll create a basic book review application in which Next.js retrieves and presents book data that Django delivers over an API.

After completing this tutorial, you will have a functional setup in which Next.js renders dynamic book reviews by using Django's API.

---

## Why Use Next.js with Django? :white_check_mark: **Fast Rendering**: Next.js supports [SSR (Server-Side Rendering)](https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering) and SSG (Static Site Generation), improving performance.

:white_check_mark: **Separation of Concerns**: Business logic is handled by Django, and UI rendering is done by Next.js.

:white_check_mark: **Scalability**: Since each technology can grow on its own, future improvements will be simpler.

---

## Step 1: Setting Up Django as the Backend

### 1. Install Django and Django REST Framework Create a virtual environment and install dependencies:

```bash # Create and activate a virtual environment python -m venv venv source venv/bin/activate # macOS/Linux venv\Scripts\activate # Windows

# Install Django and DRF pip install django djangorestframework ```

### 2. Create a Django Project and App ```bash django-admin startproject book_api cd book_api django-admin startapp reviews ```

### 3. Configure Django REST Framework In `settings.py`, add REST framework and the `reviews` app:

```python INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'reviews', ] ```

### 4. Define the Book Review Model In `reviews/models.py`:

```python from django.db import models

class BookReview(models.Model): title = models.CharField(max_length=200) author = models.CharField(max_length=100) review = models.TextField() rating = models.IntegerField() def __str__(self): return self.title ```

Run migrations: ```bash python manage.py makemigrations python manage.py migrate ```

### 5. Create a Serializer and API View

In `reviews/serializers.py`: ```python from rest_framework import serializers from .models import BookReview

class BookReviewSerializer(serializers.ModelSerializer): class Meta: model = BookReview fields = '__all__' ```

In `reviews/views.py`: ```python from rest_framework.generics import ListAPIView from .models import BookReview from .serializers import BookReviewSerializer

class BookReviewListView(ListAPIView): queryset = BookReview.objects.all() serializer_class = BookReviewSerializer ```

Add a URL route in `reviews/urls.py`: ```python from django.urls import path from .views import BookReviewListView

urlpatterns = [ path('reviews/', BookReviewListView.as_view(), name='book-reviews'), ] ```

Include this in `book_api/urls.py`: ```python from django.contrib import admin from django.urls import path, include

urlpatterns = [ path('admin/', admin.site.urls), path('api/', include('reviews.urls')), ] ```

Run the server: ```bash python manage.py runserver ```

You can now access book reviews at [vercel](https://vercel.com/).

--

## Step 2: Setting Up Next.js as the Frontend

### 1. Install Next.js In a new terminal, create a Next.js app: ```bash npx create-next-app@latest book-review-frontend cd book-review-frontend npm install ```

### 2. Fetch Data from Django API Modify `pages/index.js` to fetch book reviews: ```javascript import { useState, useEffect } from "react";

export default function Home() { const [reviews, setReviews] = useState([]); useEffect(() => { fetch("http://127.0.0.1:8000/api/reviews/") .then(response => response.json()) .then(data => setReviews(data)); }, []); return ( Book Reviews {reviews.map(review => ( {review.title} by {review.author} {review.review}

Rating: {review.rating}/5 ))} ); } ```

### 3. Start the Next.js Server Run: ```bash npm run dev ```

Visit [http://localhost:3000](https://localhosts.mobi/3000) to see book reviews fetched from Django!

---

## Step 3: Connecting Frontend and Backend

Since Django and Next.js run on different ports (8000 and 3000), we need to handle CORS (Cross-Origin Resource Sharing).

### 1. Install Django CORS Headers

In Django, install CORS middleware: ```bash pip install django-cors-headers ```

Add it to `settings.py`: ```python INSTALLED_APPS += ['corsheaders'] MIDDLEWARE.insert(1, 'corsheaders.middleware.CorsMiddleware')

CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", ] ```

Restart Django: ```bash python manage.py runserver ```

Now, Next.js can fetch data without CORS issues!

---

## Conclusion You've created a book review app by successfully integrating Next.js with Django. What we did was as follows:

1. Use the Django REST Framework to install Django. 2. To offer book reviews, an API was developed. 3. Created a frontend using Next.js to show reviews. 4. Set up CORS to allow front-end and back-end communication.

This setup provides a solid foundation for full-stack development. You can now extend it with [Django Authentication](https://www.django-rest-framework.org/api-guide/authentication/), a database, or advanced UI components!

Looking to **deploy your full-stack application seamlessly**? Check out **[Nife.io](https://nife.io)** a powerful platform for **serverless deployment, scaling, and cloud cost optimization**! 🚀

---

## Further Reading - [Django REST Framework Documentation](https://www.django-rest-framework.org/) - [Next.js API Routes](https://nextjs.org/docs/api-routes/introduction)

Deploy your next app in minutes, not days.