Coding for Entrepreneurs

Ready to Start Learning?

Sign in to check if you already have access, or get started with a purchase or membership.

Django x Next.js

Integrate a Django REST API with a Next.js Frontend

Integrate Django with Next.js!
Django is awesome. Next.js is awesome. The two together give you the best of both worlds.
Topics covered:
  • Python and Django web development
  • Django Ninja for our Rest API URLs & Schema
  • JWT Authentication for Django & Next.js
  • User interface with shadcn ui and tailwindcss
  • Production database with Neon Postgres
  • Deployment for both Django and Next.js to Railway
Django is a powerful web framework that handles user auth, database management (ORM), form validation, has a built-in admin, and, of course, is written in Python.
Django Ninja is a fast way to build a Rest API for Django. It's inspired by FastAPI but gives you all of the Django-ness you want.
Next.js is React.js with url routing built-in along with server-side features that make it well suited as a full web framework.
React.js is one of the best ways to make modern and powerful frontends.
shadcn ui is a popular React package that makes it easy to copy and paste UI components that are highly customizable and use tailwindcss.
Thank to Neon for helping bring this course to life at no-cost to you.
Django x Next.js

Lifetime access to this course

or get access to 500+ courses with a membership

Lessons

1

Welcome

3:19

2

Overview & Requirements

3:04

3

Demo

7:59

4

Project Setup

7:06

5

Hello World with Django Ninja

7:13

6

User Auth with Django Ninja JWT

11:44

7

Custom Django Model with Matching Ninja Schema

8:10

8

Get and List Models via Django Ninja Router

8:53

9

Your First API request from Next to Django

6:14

10

Solve CORS Errors from Next to Django

3:08

11

Get API Data on Page Load with SWR

5:04

12

Submit Form Data with NextJS

11:00

13

httpOnly Cookies with Nextjs API Routes

9:27

14

Data from Nextjs Server to Django Backend

3:30

15

Auth Token Methods

5:30

16

Logout Page and API Route in Nextjs

8:20

17

User Required Requests from Nextjs to Django

9:31

18

Custom Context Provider and useAuth Hook

8:35

19

Login Required Redirect for Invalid Auth Tokens

12:14

20

Install shadcn to Nextjs

9:04

21

Login Page with shadcn ui

5:56

22

Base Layout with Navbar

9:38

23

Navbar Component

9:41

24

User and Non User Navbar Links

5:45

25

Waitlist Form and NextJS API Endpoint

9:37

26

Django Ninja Create Object via POST

4:51

27

Django Ninja User or Annon User Required

6:38

28

Django User Foreign Keys

5:09

29

Decouple Navbar Components

8:46

30

NextJS API Proxy Class

5:47

31

NextJS List view as shadcn Table

7:49

32

Improve API Proxy Class

4:44

33

Django Form Validation with Django Ninja

14:34

34

Rendering Django Form Validation Errors in Nextjs

13:36

35

Nextjs Config for Environments

6:31

36

Environment Variables in Django

7:03

37

Deploy Django Project to Railway

13:58

38

Production Django Database with Neon Postgres

14:52

39

Prepare our Nextjs Production Build

7:31

40

Nextjs Production Frontend on Railway

14:31

41

Dynamic Routing in Nextjs Pages and Routes

10:43

42

Adding and Updating New Database Fields

15:20

43

Deployed

5:34

44

Thank you and thoughts on how practical this is

3:29