Integrating Django with Next.js

While the Django documentation doesn't provide a specific tutorial for integrating with Next.js, I can outline the general approach for creating a full-stack application with Django as the backend API and Next.js as the frontend.

Architecture Overview

In this setup:

• Django will serve as your REST API backend
• Next.js will be your frontend application
• They will communicate via HTTP requests

Step-by-Step Integration Guide

1. Set up Django Backend

First, create a new Django project:

BASHCopied
# Create a virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install Django and Django REST framework
pip install django djangorestframework django-cors-headers

# Start a new Django project
django-admin startproject backend
cd backend

# Create an app
python manage.py startapp api

Configure Django for API usage in settings.py:

PYTHONCopied
INSTALLED_APPS = [
    # ...
    'rest_framework',
    'corsheaders',
    'api',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    # ... other middleware
]

# Allow requests from Next.js development server
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
}

Create a simple API endpoint in api/views.py:

PYTHONCopied
from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def hello_world(request):
    return Response({"message": "Hello, World!"})

Set up URLs in api/urls.py:

PYTHONCopied
from django.urls import path
from . import views

urlpatterns = [
    path('hello/', views.hello_world, name='hello_world'),
]

Include in main backend/urls.py:

PYTHONCopied
from django.contrib import admin
from django.urls import path, include

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

Run the Django server:

BASHCopied
python manage.py migrate
python manage.py runserver

2. Set up Next.js Frontend

In a separate terminal, create a new Next.js project:

BASHCopied
npx create-next-app@latest frontend
cd frontend

Create a simple page to fetch data from Django in app/page.tsx:

TSXCopied
'use client'

import { useState, useEffect } from 'react'

export default function Home() {
  const [message, setMessage] = useState('')
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('http://localhost:8000/api/hello/')
        const data = await response.json()
        setMessage(data.message)
        setLoading(false)
      } catch (error) {
        console.error('Error fetching data:', error)
        setLoading(false)
      }
    }

    fetchData()
  }, [])

  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold mb-8">Django + Next.js Integration</h1>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <div className="p-6 bg-white rounded-lg shadow-md">
          <p className="text-xl">Message from Django API: <strong>{message}</strong></p>
        </div>
      )}
    </main>
  )
}

Run the Next.js development server:

BASHCopied
npm run dev

Visit http://localhost:3000 to see your integrated application.

Project Structure

Your final project structure will look like:

django-nextjs-project/
├── backend/             # Django project
│   ├── api/             # Django app
│   │   ├── views.py     # API endpoints
│   │   └── urls.py      # API routes
│   ├── backend/         # Django project settings
│   │   ├── settings.py
│   │   └── urls.py
│   └── manage.py
└── frontend/            # Next.js project
    ├── app/
    │   └── page.tsx     # Main page component
    ├── public/
    └── package.json

Production Considerations

For production:

1. Configure proper CORS settings
2. Set up authentication between services
3. Consider using environment variables for API URLs
4. You might deploy Django on a service like Heroku/Railway and Next.js on Vercel

This basic setup demonstrates the integration pattern. You can expand it by adding more complex API endpoints, authentication, and advanced frontend features as needed.