Build a Django Rest API and Integrate with Next.js! Django Ninja, shadcn, Neon Postgres, Railway...
Vložit
- čas přidán 12. 07. 2024
- ⭐️ Sign up for Neon right now! neon.tech/cfe
Topics:
✅ Python web development with Django
✅ Building a Rest API with Django Ninja (FastAPI meets Django)
✅ Create a Next.js App
✅ Integrate Django & Next.js
✅ Use auth with Django Ninja JWT
✅ Integrate Neon Postgres
✅ Serialize Django models into JSON Data via Django Ninja Schemas (based on Pydantic)
✅ Leverage Server-Side Next.js to Store Auth Tokens as httpOnly Cookies
✅ Deploy Next.js to Railway.app
✅ Deploy to Railway.app for Django via Custom Docker Container
✅ Using Neon Branching for Postgres in Dev and Production environments
✅ Python Decouple for env vars
💽 Next.js Code: github.com/codingforentrepren...
💽 Django Code: github.com/codingforentrepren...
🕹️ Blog - Deploy Django on Railway with this Dockerfile - cfe.sh/blog/deploy-django-on-...
If you like this course, consider:
- SaaS Foundations -- Learn about integrating Django with Stripe, User Permissions, GitHub Actions, and much more: • Python Tutorial: Build...
- Build Full Stack Web Apps in Pure Python with Reflex - A great challenge would be to use Reflex as a replacement for Next.js: • Build Full Stack Web A...
Thank you to Neon for sponsoring this course - sign up at neon.tech/cfe
🚀 Enroll now on cfe.sh/enroll 🚀
00:00:00 Welcome
00:03:21 Overview and Requirements
00:06:29 Demo
00:14:33 Project Setup
00:21:43 Hello World with Django Ninja
00:29:01 User Auth with Django Ninja JWT
00:40:50 Custom Django Model with Matching Ninja Schema
00:49:04 Get and List Models via Django Ninja Router
00:58:01 Your First API request from Next to Django
01:04:20 Solve CORS Errors from Next to Django
01:07:32 Get API Data on Page Load with SWR
01:12:41 Submit Form Data with NextJS
01:23:46 httpOnly Cookies with Nextjs API Routes
01:33:18 Data from Nextjs Server to Django Backend
01:36:52 Auth Token Methods
01:42:27 Logout Page and API Route in Nextjs
01:50:51 User Required Requests from Nextjs to Django
02:00:27 Custom Context Provider and useAuth Hook
02:09:06 Login Required Redirect for Invalid Auth Tokens
02:21:24 Install shadcn to Nextjs
02:30:32 Login Page with shadcn ui
02:36:33 Base Layout with Navbar
02:46:16 Navbar Component
02:56:01 User and Non User Navbar Links
03:01:51 Waitlist Form and NextJS API Endpoint
03:11:32 Django Ninja Create Object via POST
03:16:28 Django Ninja User or Annon User Required
03:23:10 Django User Foreign Keys
03:28:23 Decouple Navbar Components
03:37:14 NextJS API Proxy HTTP Class
03:43:06 NextJS List view as shadcn Table
03:50:59 Improve API Proxy Class
03:55:48 Django Form Validation with Django Ninja
04:10:26 Rendering DjangoForm Validation Errors in Nextjs
04:24:06 Nextjs Config for Environments
04:30:42 Environment Variables in Django
04:37:49 Deploy Django Project to Railway
04:51:51 Production Django Database with Neon Postgres
05:06:48 Prepare our NextJS Production Build
05:14:23 NextJS Production Frontend on Railway
05:28:59 Dynamic Routing in Nextjs Pages and Routes
05:39:46 Adding and Updating New Database Fields
05:55:10 Deployed
06:00:48 Thank you
Thanks for watching!
Next.js Code: github.com/codingforentrepreneurs/django-nextjs-frontend
Django Code: github.com/codingforentrepreneurs/django-nextjs-backend-api
Chapters
00:00:00 Welcome
00:03:21 Overview and Requirements
00:06:29 Demo
00:14:33 Project Setup
00:21:43 Hello World with Django Ninja
00:29:01 User Auth with Django Ninja JWT
00:40:50 Custom Django Model with Matching Ninja Schema
00:49:04 Get and List Models via Django Ninja Router
00:58:01 Your First API request from Next to Django
01:04:20 Solve CORS Errors from Next to Django
01:07:32 Get API Data on Page Load with SWR
01:12:41 Submit Form Data with NextJS
01:23:46 httpOnly Cookies with Nextjs API Routes
01:33:18 Data from Nextjs Server to Django Backend
01:36:52 Auth Token Methods
01:42:27 Logout Page and API Route in Nextjs
01:50:51 User Required Requests from Nextjs to Django
02:00:27 Custom Context Provider and useAuth Hook
02:09:06 Login Required Redirect for Invalid Auth Tokens
02:21:24 Install shadcn to Nextjs
02:30:32 Login Page with shadcn ui
02:36:33 Base Layout with Navbar
02:46:16 Navbar Component
02:56:01 User and Non User Navbar Links
03:01:51 Waitlist Form and NextJS API Endpoint
03:11:32 Django Ninja Create Object via POST
03:16:28 Django Ninja User or Annon User Required
03:23:10 Django User Foreign Keys
03:28:23 Decouple Navbar Components
03:37:14 NextJS API Proxy HTTP Class
03:43:06 NextJS List view as shadcn Table
03:50:59 Improve API Proxy Class
03:55:48 Django Form Validation with Django Ninja
04:10:26 Rendering DjangoForm Validation Errors in Nextjs
04:24:06 Nextjs Config for Environments
04:30:42 Environment Variables in Django
04:37:49 Deploy Django Project to Railway
04:51:51 Production Django Database with Neon Postgres
05:06:48 Prepare our NextJS Production Build
05:14:23 NextJS Production Frontend on Railway
05:28:59 Dynamic Routing in Nextjs Pages and Routes
05:39:46 Adding and Updating New Database Fields
05:55:10 Deployed
06:00:48 Thank you
Finally, my favorite stack! I've been waiting for this. Thanks, and keep it up!
Thank you!
Bro I will definitely be sleeping in your channel, if i can get good with alot of things here . I see myself progressing ❤
Hey Justin,
love your work! That Ninja API video was super helpful. You always have the best recommendations.
Keep up the awesome content.
Thanks for the awesome tip!
Thank you!
Awesome
Looking for the exact content for a long time.
You are the best
Awesome No more good content on youtube regarding django & nextjs stack thank you so much sir g
Django and Nextjs, my favorite stack for modern web application development.
Thank you so much!!🤩
Oh yeah? Have you done this integration before?
@@CodingEntrepreneurs Yes, I have worked on several projects involving this. While managing cookies with SSR, particularly with OSX and Google Auth, can be a bit complex, it is definitely feasible. The benefits of separating the frontend from the backend API with this stack are incredible for scalability.
Nice and great and excellent and PRODUCTION READY! Great job, well done!
Just what I had been looking for for days, a project that has Python in the backend and Next in the frontend. I love you, I will leave like, sub and my comment apart from supporting you for this
Thank you for sharing amazing course :)
This is actually great I have been thinking on how to integrate django backend on NextJs
Excellent style to teach us,
Thank you
Great tutorial as always
thank you!
The ultimate professor
Wonderful tutorial
You must be a mind reader, thank you!!!
Finally...someone discuss Next JS & Django, thank u @CodingEntrepreneurs
yes... yes yes... more django projects
please please please...
some ideas leetcode like clone.. with user information, being stored.. but within the python ecosystem, no javascript please..
maybe reflex, again..
Who else wants to see this a leetcode-like clone?
amazing. can you plz make a full tutorial about websockets and django channels in a clear and fully covering way cus no one else can explain it better than u pal
great!!!
I'm subscribed 🎉
🎉
FastAPI + Next.js, Please !!!🙏🏽
Hello Justin,
Thank you again for your work and for sharing your skills.
I would like to know if it is possible to create a tutorial on how to use a Django application in multi-tenant mode.
Thank you very much.
Much appreciate your effort on this wonderful tutorial❤. Do you see yourself doing a Nuxt JS, Django, Django Ninja API project one of the days? Thanks
Nice one! would you like too see a version of this with Strawberry GraphQL 😉
Nice video! Can you implement the refresh token logic for when the access token expires?
Great suggestion!
how do you do it.. i am still going through the SaaS course, crazy work you do man.. Appreciate it
thanks for your video, got a question, whould you use alpinejs as frontend framework?
I need to spend some time with alpine.js, hear great things.
Xont jump to new framewroks. Next js is best right now and upto industry standards
@@_vk03 i see, but the question is not always to have these standards, but rather good developer experiences with the most productive way, you know?
according my view, alpinejs is leightweight has all of these features , which we need in for the industry and its likewise tailwindcss just html-only
@@ahmadumar9387 Alpine.js is just BS.
Quick question Justin @CodingEntrepreneurs, i have been building web apps with django and DRF. I focus more on the backend of things but if need arise for me to provide the frontend services, i always use the Django views and templates (i know its a bit of an hassle compared to mordern day frontend frameworks but i still feel comfortable using them).
So now I have decided to learn a frontend framework this remaining half of the year. I wanted to go for React but now you come up with Next.js. Which one do you advice a beginner frontend dev like me to go for. Or should I just ignore all these Js Frameworks and go with HTMX(Am still waiting on a video for you to talk about HTMX, I would love to hear your thoughts on HTMX).
PS: I just really want to know which one you would choose between React and Next.js, if you were in my shoes.
I'm answering this because you called my name lol.
NextJS is just built on top of React. If you're already comfortable and know the fundamentals of React, you should now move to NextJS. That's the common roadmap. NextJS just makes everything easier with the App router. So for me, I really dove in through react for about 2 months, then naturally moved into nextjs. Again React first then -> NextJS. You can't choose between them. Next.JS is an upgrade of React or the next step after learning React.
@@justin9494 lolz... You're really funny. I don't mind which Justin replied. Thanks for the reply.
Wow... So next.js is just the extended version of react, that's cool. Thanks for you explanation. I think am going to delve into next.js straight away. 😁
Can you do next.js and FastAPI next?
Question is, would you do this at all when you can build the entire app in Reflex/Django as well in Python?
The point of this is you can use NextJS.
Thanks for the tutorial, it was really informative ,I have a quesation
what if I want to fetch data sometimes from the client and other times from the Next.js server? Is there a best practice to sync the access token between the two?
I tried fetching the login route from the client to the Django server, then hitting another login route on my Next.js server with the access/refresh token obtained from the first Django call. Please note that the Django server sets HTTP-only cookies and returns the access and refresh tokens in the body. After receiving the tokens, the Next.js server stores them in HTTP-only cookies. As a result, I have four cookies: `access_dj`, `refresh_dj`, `access_nx`, and `refresh_nx`. Note that they have the same values, but this ensures that I have the tokens on the Next.js server.
I did this because sometimes I want server-side rendered (SSR) content and other times I want to fetch highly changeable data using React Query
Wdym? You can fetch data from the client and next.js server using the same nextjs api route.
Question: how to handle Google Auth in this case while not exposing the django apis ?
Thankyou ❤
So it seems you now have front end code all over the place e.g. in django forms and also as react. What's your reasoning for not just handling all front end stuff in the nextjs app? For example, you could have used shadcn to create the forms and validated it with zod. If you gonna have nextjs and django then I recommend you use them for exactly what they are good at, not mixing up like that.
Validation should happen on both but definitely on server side - eg your database should never have invalid data so your Django project must have validations. But yeah, client side validation is great for performance and usability but your apis need to be hardened.
What is difference between drf and django ninja??
Django Ninja does fundamentally less than DRF but essentially gives you FastAPI in Django which means Pydantic for serialization.
DRF does all that with its own tooling. Plus the DRF class-based views require you to understand class-based views instead of just using functions.
Fundamentally though, they can do the same thing. DRF is more feature complete while Django Ninja is super easy to build with.
9:00 😂😂
🙃
is this just a video or there will be more and we;ll get a full series ?
Should there be more?!
@@CodingEntrepreneurs ofc !!
how do i make the css of django work in the deployed prod?
Use whitenoise in the short term, Django storages with S3 buckets in the long term.
@@CodingEntrepreneurs thank you so much!
Can you do a new 30 days of Python, please
why not use FastApi? is django-ninja is better?
did you at least watch the video? Because in a couple of moments he tells why.
Nice why not Fastapi ?
Why not REST API with Node.js ?
I do this better
Excelente mister