Build a Django Rest API and Integrate with Next.js! Django Ninja, shadcn, Neon Postgres, Railway...

Подписаться 326 тыс.

Просмотров 17 тыс.

50% 1

⭐️ 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

Опубликовано:

12 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 73

@CodingEntrepreneurs 12 дней назад

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

@laysskheir394 12 дней назад

Finally, my favorite stack! I've been waiting for this. Thanks, and keep it up!

@CodingEntrepreneurs 12 дней назад

Thank you!

@judevector 12 дней назад

Bro I will definitely be sleeping in your channel, if i can get good with alot of things here . I see myself progressing ❤

@amirfiroozi7780 9 дней назад

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!

@CodingEntrepreneurs 9 дней назад

Thank you!

@HadiAriakia 12 дней назад

Awesome Looking for the exact content for a long time. You are the best

@bijendernagar15 11 дней назад

Awesome No more good content on youtube regarding django & nextjs stack thank you so much sir g

@sebastiancastillo3560 12 дней назад

Django and Nextjs, my favorite stack for modern web application development. Thank you so much!!🤩

@CodingEntrepreneurs 12 дней назад

Oh yeah? Have you done this integration before?

@sebastiancastillo3560 11 дней назад

@@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.

@zoltanmolnar6956 11 дней назад

Nice and great and excellent and PRODUCTION READY! Great job, well done!

@Deus-lo-Vuilt 11 дней назад

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

@jaecheokkim99 10 дней назад

Thank you for sharing amazing course :)

@ericjr7474 7 дней назад

This is actually great I have been thinking on how to integrate django backend on NextJs

@muhammadyasir8880 12 дней назад

Excellent style to teach us,

@CodingEntrepreneurs 12 дней назад

Thank you

@avetiqasatryan1540 11 дней назад

Great tutorial as always

@aashayamballi 12 дней назад

thank you!

@RohitGupta-dp2mt 12 дней назад

The ultimate professor

@ifeanyinneji7704 10 дней назад

Wonderful tutorial

@Matty100 12 дней назад

You must be a mind reader, thank you!!!

@crabytech1122 8 дней назад

Finally...someone discuss Next JS & Django, thank u @CodingEntrepreneurs

@zeroinfinity3610 12 дней назад

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..

@CodingEntrepreneurs 12 дней назад

Who else wants to see this a leetcode-like clone?

@amiralasady3725 8 дней назад

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

@andresquesada6059 12 дней назад

great!!!

@earnstein7607 10 дней назад

I'm subscribed 🎉

@CodingEntrepreneurs 10 дней назад

🎉

@prosperzegue6735 11 дней назад

FastAPI + Next.js, Please !!!🙏🏽

@oseebotendju9120 10 дней назад

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.

@christophermaile3842 11 дней назад

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

@patrickpy 8 дней назад

Nice one! would you like too see a version of this with Strawberry GraphQL 😉

@mfion1 11 дней назад

Nice video! Can you implement the refresh token logic for when the access token expires?

@CodingEntrepreneurs 11 дней назад

Great suggestion!

@atitebisherif9334 11 дней назад

how do you do it.. i am still going through the SaaS course, crazy work you do man.. Appreciate it

@ahmadumar9387 12 дней назад

thanks for your video, got a question, whould you use alpinejs as frontend framework?

@CodingEntrepreneurs 12 дней назад

I need to spend some time with alpine.js, hear great things.

@_vk03 12 дней назад

Xont jump to new framewroks. Next js is best right now and upto industry standards

@ahmadumar9387 12 дней назад

@@_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

@kazmi401 12 дней назад

@@ahmadumar9387 Alpine.js is just BS.

@awesomejr.530 12 дней назад

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.

@justin9494 6 дней назад

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.

@awesomejr.530 5 дней назад

@@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. 😁

@farelganlaky1536 4 дня назад

Can you do next.js and FastAPI next?

@3MandMatt 5 дней назад

Question is, would you do this at all when you can build the entire app in Reflex/Django as well in Python?

@justin9494 5 дней назад

The point of this is you can use NextJS.

@chihabDj-o2v 11 дней назад

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

@justin9494 6 дней назад

Wdym? You can fetch data from the client and next.js server using the same nextjs api route.

@bacharsaleh6984 12 дней назад

Question: how to handle Google Auth in this case while not exposing the django apis ?

@kumargupta7149 12 дней назад

Thankyou ❤

@thefamousdjx 5 дней назад

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.

@CodingEntrepreneurs 5 дней назад

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.

@sugogoi51 7 дней назад

What is difference between drf and django ninja??

@CodingEntrepreneurs 7 дней назад

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.