NEXT.js 13 Complete Tutorial (Part 1)
1:09:10
Пікірлер
@mohsinawan-m3x
@mohsinawan-m3x 18 күн бұрын
plz provide the tutorial for drf authentication
@mohsinawan-m3x
@mohsinawan-m3x 18 күн бұрын
please provide a video on django rest frame work authentication
@TomislavMiletic
@TomislavMiletic Ай бұрын
Very fast pace, NOT for beginners.
@progressaienobe3468
@progressaienobe3468 Ай бұрын
Hi Sir, hope you're doing well. Just wanted to let you know this is a very great tutorial and I hope you can make more great content. :)
@ajaniyeseer5947
@ajaniyeseer5947 2 ай бұрын
You're great 👍
@atemrandyasong5710
@atemrandyasong5710 3 ай бұрын
Not working for typescript project
@atemrandyasong5710
@atemrandyasong5710 3 ай бұрын
It works only when the page is first loading after refreshing the browser. But doesn't work between page transitions
@User_mayor
@User_mayor 4 ай бұрын
and where to find the second part of the video
@aruns6214
@aruns6214 4 ай бұрын
i saw at 1.25x speed
@TheKracko
@TheKracko 4 ай бұрын
Thanks for this!!
@marish7274
@marish7274 4 ай бұрын
Excellent video for DRF. The content is very precise and very clear . So easily can understand by anyone. The accent is not difficult. That's addon advantage.... really love this content
@mixer4327
@mixer4327 5 ай бұрын
sir is this a complete full stack website with DRF + React js ......?
@gojkovich1
@gojkovich1 5 ай бұрын
Details on click dont work anymore? did something change? I followd tutorial and compare github code. Somehow dont work anymore whenever i add PopularPostsApiView in views.
@rexst3ve
@rexst3ve 6 ай бұрын
Totally worth it... you can tell he loves teaching. Everything explained so simple that even a 10 year old can follow through. He speaks so normal to make sure you are following properly.
@jonaszjonasz5752
@jonaszjonasz5752 6 ай бұрын
Hello I am creating a project where I can overwrite, delete or add posts, photos and videos using the django admin panel. And it's quite simple. But how to make a menu list for a page, e.g. Home, About, Contact, ... which I can overwrite, add or delete on the Project page. Overwriting and adding menu items is to be done using the django admin panel. Just like in the WordPress administration panel. Maybe you can help or point me in the right direction where to look for a solution.
@mahendranath2504
@mahendranath2504 6 ай бұрын
nice Thank for sharing amazing content, liked it 👍
@mahendranath2504
@mahendranath2504 6 ай бұрын
Nice thank you so much for sharing the knowledge, liked 👍and subscribed
@krzysiekkrzysiek9059
@krzysiekkrzysiek9059 7 ай бұрын
Awesome tutorial, but try to keep Python and Django principles like `snake_case` with variables and functions/methods and spaces between the percentage sign like `{% for post in posts %} {{ post.image }} {% endfor %}`. Also consider doing tutorial for intermediate👍
@anomynousxx
@anomynousxx 8 ай бұрын
Can you add time stamps
@__VigneshS-wb4sk
@__VigneshS-wb4sk 8 ай бұрын
Your explanation of the concept is really awesome. I got a clear understanding about drf from this tutorial. Thanks a lot.
@Leesdjo
@Leesdjo 9 ай бұрын
Amazing tutorial. I thought this tutorial would be scratching the surface just like any other random Django tutorials on KZbin but this one honesty gives everything we need. Thank you. Huge respect to you.
@Leesdjo
@Leesdjo 9 ай бұрын
I just found this video very helpful with detailed explanation to get started. I hope whoever finds this useful as well will agree with me. Massive thanks from me.
@User_mayor
@User_mayor 4 ай бұрын
and where to find the second part of the video
@marioreiley7456
@marioreiley7456 9 ай бұрын
The Best on The Best. Better than paid courses!
@VeryThaiEnt
@VeryThaiEnt 9 ай бұрын
Nice to learn class view
@raulbarriga7416
@raulbarriga7416 9 ай бұрын
The is tutorial for migrating is now different since Next.js 13's app router is not in beta anymore. Just an fyi.
@foodpass6737
@foodpass6737 10 ай бұрын
Overall great tutorial at all..but one thing its bit confusing for me is the html code... the given code is final blog code so its difficult to understand for me during following tutorial anyway thanks
@zzsszzzxc9310
@zzsszzzxc9310 10 ай бұрын
This is much better than other tutorials. Really gem! Thank you for creating this.
@enkhbayarwiki1353
@enkhbayarwiki1353 10 ай бұрын
github link ?
@Desertsol1
@Desertsol1 10 ай бұрын
If anyone have problem geting the Loading.js file to render I belive the issue is that the filename needs to be lowercase. loading.js. I think that in the background the layout.js is searching for loading.js to be able to render it, and when we write it as Loading.js, it cant find loading.js because it does not exist. When the loading.js is in the app folder each page should render the loading.js before the page is loaded. NextJs is quite fast and it might be hard to se if it works, try make a fetch with an timeout of a few seconds in a page.js.
@uncleRusty2023
@uncleRusty2023 10 ай бұрын
please add in your tutorial the complete web functionalities. appreicated, its a great work
@alexramos587
@alexramos587 10 ай бұрын
Great course!
@hishamch9036
@hishamch9036 10 ай бұрын
best cource about drf on youtube, Thanks helps a lot
@ilirbajrami2902
@ilirbajrami2902 10 ай бұрын
Don't lose time with this crap! First its not a real progress but just a width animation. Second its "loading.js" not "Loading.js". And many more mistakes....
@MoisesVillalbaSilvero
@MoisesVillalbaSilvero 11 ай бұрын
Amazing tutoríal!!! More for django + Rect.. please
@abhinav.sharma
@abhinav.sharma 11 ай бұрын
This is actually adding 600ms loading time on page, a better approach would be to use the router parameters instead of that time, like we used in nProgress lib. Don't know how that could be implemented. Update: I just found out you can use a package called next-toploader which will do the same thing in next 13, just import and place it just inside your body.
@wanarchives
@wanarchives 11 ай бұрын
next-toploader is good, but sometimes the loading progress still loading in the middle while my page already finished load
@codingstrade
@codingstrade 11 ай бұрын
In the Loading.js page Whether you use a CSS progress bar or text, the function remains the same in ensuring the loading process is appropriately managed. The animation you're seeing is a result of the width increasing by 10 every 600ms. This creates the effect of the red bar "running" across the screen. Once the page is fully loaded, this animation stops.
@muhammadbilal6865
@muhammadbilal6865 4 ай бұрын
@@codingstradegreat can you please tell how you have detected to stop the page loader when page loaded like how are you detecting that. Thanks.
@chinzano
@chinzano 7 күн бұрын
​@@muhammadbilal6865 he is not detecting anything, so this is the problem (?). in nextjs it just shows the component in "loading.{tsx | jsx}" and when page is loaded (server html rendered), this loading component just disappears
@itstherealrahul
@itstherealrahul 11 ай бұрын
import React from "react"; import ProgressBar from "@components/progress-bar/ProgressBar"; const Loading = () => { return <ProgressBar />; }; export default Loading;
@itstherealrahul
@itstherealrahul 11 ай бұрын
"use client"; import React, { useEffect, useState } from "react"; import styles from "@components/progress-bar/ProgressBar.module.css"; const ProgressBar = () => { const [progress, setProgress] = useState(0); useEffect(() => { const interval = setInterval(() => { setProgress((prevProgress) => prevProgress >= 100 ? 0 : prevProgress + 10 ); }, 600); return () => { clearInterval(interval); }; }, []); return ( <div className={styles.loadingContainer}> <div className={styles.loadingBar} style={{ width: `${progress}%` }} ></div> </div> ); }; export default ProgressBar;
@itstherealrahul
@itstherealrahul 11 ай бұрын
Hello Sir, Even if I have imported my progressBar in loading.js file it's not working please help me sir
@codingstrade
@codingstrade 11 ай бұрын
Please wait for the complete shop course. I will go over everything again and provide a detailed explanation there.
@arviennurdiana
@arviennurdiana 11 ай бұрын
I think this is the best tutorial for beginners. very detailed explanation.. .. Awesome
@samiali1502
@samiali1502 11 ай бұрын
Thank you from Germany , I found your tutorial much better than many paid tutorial here, keep going with new amazing tutorials.
@yt4vinay
@yt4vinay 11 ай бұрын
While styling the Component at 24:55 you need to use 'use client' to make it work
@imperfectionist4535
@imperfectionist4535 11 ай бұрын
You have done it in simple manner.. Love it. I will try to implement it in my project and also I want to add functionality: when the page is fully loaded I want the progress bar to be width 100%, to reflect the application loading state complitely. Also this video is relevant because in Next 13 almost none of the progress bar packages work perfectly. Thank you.
@isbelmont
@isbelmont Жыл бұрын
1:52:34 reading documentation?
@hallyma
@hallyma Жыл бұрын
Thank you! This helped me so much!
@dharmesh2061
@dharmesh2061 Жыл бұрын
bro taking in 0.5x
@ThinhBuiGiaMark
@ThinhBuiGiaMark Жыл бұрын
where do you put the progressBar? , cause if i put it in page, it continuely running nonstop
@codingstrade
@codingstrade Жыл бұрын
Please watch the course until the end. At 24:40, I have explained this concept. To use it for the entire website, you need to create a file named Loading.js and then import the progressBar. If you want to use it for a specific page, you should include it in your useEffect hook, or you can also create a Loading.js file again.
@darinaskew1682
@darinaskew1682 Жыл бұрын
Excellent tutorial,
@el_urrim
@el_urrim Жыл бұрын
This is a well structured tutorial, better than many paid tutorials. I learned a lot. You're an awesome teacher.
@rakeshkundu2872
@rakeshkundu2872 Жыл бұрын
0:00 Introduction(Demo) 0:47 Project Setup 5:56 MUI Tutorial 24:21 Starting of the project 24:43 Navbar
@dark_knight2341
@dark_knight2341 Жыл бұрын
Where do you put the Progress Bar component ?
@codingstrade
@codingstrade Жыл бұрын
Please watch the course until the end. At 24:40, I explained this concept. To use it for the entire website, you need to create a file named Loading.js and then import the progressBar. If you want to use it for a specific page, you should include it in your useEffect hook, or you can also create a Loading.js file again.
@dabiuzumaki3262
@dabiuzumaki3262 Жыл бұрын
sir when is the fullstack website of django+react arriving????? I am waiting eagerly please helpppp
@codingstrade
@codingstrade Жыл бұрын
Yes, it's on my list, but I'm currently swamped with Projects in my job and business. I'll get to it as soon as I can. Thanks for understanding!
@alexiglesias3464
@alexiglesias3464 Жыл бұрын
It doesn't work, even using a client component and then, importing it in the layout.js
@codingstrade
@codingstrade Жыл бұрын
In App Directory nprogress is not supported. I have created a new Tutorial for this: kzbin.info/www/bejne/fWnZnoOdeLSag5I
@alexiglesias3464
@alexiglesias3464 Жыл бұрын
@@codingstrade Thanks!