You need to start doing this production focused tutorials in typescript. It is hard to keep ot as references for the future since not company will deplot in javascript, and this will go just for personal projects, or to fall in tutorial hell. It would be more helpful to do the tutorial how company are using it so we can reference part of the video later.
I cannot possibly thank you enough for this incredible tutorial. I was just appointed technical lead on a new project for my job, and we decided to use NextJS for it. Using what I learned from this short lesson made my look like a friggin badass to leadership! Thank you so much and keep up the great work!
I really like that you make the graphs in real time so it's easy to follow your train of thought and it feels more engaging than someone reading off premade stuff.
Like what ? Because I am also thinking to watch this video. I know the basic JS and React is it enough? and If I follow this is will it become proper website ?
Sir I have no words for you to make such a detailed video and I love your practical approach to explain each concept step by step. I have seen many tutorial videos on RUclips they just typed but never tried to explain. Hopefully, please continue these types of videos as this is really beginner friendly, so I would like more videos like this in the upcoming 2024. Thank you 🙇
I'm not sure if anyone is having a similar issue, but for some reason when you are doing imports (at least in my app) the jsconfig.json "paths" values needs to also be present in the tsconfig.json file otherwise the "@/" imports will eventually stop working. This may not have been the case when this video was first released, but this happened to me. Hope this saves someone some time because I spent a good hour rereading directory names that I knew were correct LOL
usually i stopped watching tutorials due to getting stuck in the so call tutorials hell. but i notice that what make this one special than the rest is that there are many new take way tips that are directly related to Nextjs. the caching , the SSR and so on, when i finished the overall development, the performance was way to fast, all the load and fetching was happening at a fast phase, definitely useful for future project. definitely worth the time spend
Hi LamaDev, thanks for the great tutorial! I got a great amount of value from this 😁 You missed something small at the end, when creating a new user from admin panel the isAdmin attribute is not passed to addUser server action function so all users created will be not admin by default.
Thank you so much for this course! I have followed your youtube for a year. I really like the practices and how you explained it in your video. Thank you so much and Keep posting and Coding!
I missed u so much Lama sir everyday i was looking for your new video and finally now your new video 😊🎉 you're the best Lama ❤ kindly build an e-commerce app with next js 14 i need it sir 😢
This came right at the perfect time. I've been trying to figure out how to add Google authentication in NextJS 14. I haven't even started the course, but I know from experience that it is going to be high quality.
React redux with JWT Authentication - Sign up, Login, Logout & Private Route(access and refresh token redux state management ).how to handle token or session(state management redex store) in enterprice level application ....thanks in advance bro ... eagarly waiting bro..create enterprice level small application ( like ecommerce with cover all topics bro)
This is the perfect Next js course to watch, but i would highly suggest learning MERN stack before diving into Next js as a fullstack since you will be creating REST API's and communicating with the database
This is such an amazing video and a coincidence becuz i was planning on learning next js i searched and ur vid was 22hours ago nice its also well explained !!!
man you're the best teacher ♥ please i'm facing problems deploying through gh-pages with the dynamic pages and stuff. a tutorial would be most appreciated please
your videos are great, I build my app and use what i don't know through your tutorials. would you consider doing a new unit testing tutorial with modern nextjs in the future ?
Excellent! I want to run this example locally, but I'm new to MongoDB. Can you help by providing your Env file (with comments on how to set this up for my own session) and a quick walk-through of MongoDB setup requirements please?
00:02 Next.js 14 tutorial covers app setup, data fetching, authentication, and server actions. 02:54 Creating a Next.js app and customizing the installation 08:21 Next.js app structure and routing 11:28 Creating nested routes and dynamic routes in Next.js 18:03 Using a main layout for all pages to avoid repetitive components 20:30 Using common components with layouts 25:26 Using the Link component to fetch pages before clicking the links. 28:20 Create custom loading and error layouts for better user experience. 33:27 Defining variables for styling 35:56 Styling components and setting layout with CSS 40:57 Setting up styles for the layout and links 43:25 Creating a component using a CSS file and handling dynamic class names 48:54 Implementing user authentication and authorization 51:43 Creating a responsive menu with user interaction 56:55 Adding responsiveness for container size 1:00:01 Optimizing images using next.js image for better performance. 1:05:30 Configuring remote images for Next.js application 1:08:33 Creating text and image containers with components 1:14:57 Styling the footer section 1:18:02 Creating layout and styling using Flexbox and CSS 1:24:16 Styling design elements and creating components 1:27:36 Creating a postcard with two sections 1:33:32 Styling adjustments for phone size and long content 1:36:58 Creating layout for user profile view 1:43:03 Fixing overflowing footer and styling layout 1:46:11 Next.js allows both server-side and client-side rendering. 1:52:32 Server-side rendering vs. client-side rendering 1:55:20 Next.js provides flexibility in combining server and client side components. 2:00:42 Using isClient to run component on client side in Next.js 2:03:23 Preventing hydration problem in Next.js components. 2:09:11 Prefetching and navigating in Next.js 14 2:11:48 Using the refresh method to refresh the current route 2:17:39 Using Json placeholder, fetch and display data from a fake API in Next.js 2:20:39 Caching and data storage options in Next.js 2:26:05 Creating a post user module and fetching user data using user ID patching 2:29:20 Using suspense and data caching in Next.js 14 2:35:11 Using MongoDB as the data source instead of creating an API. 2:37:45 Connecting to MongoDB using Mongoose for creating models and establishing connection. 2:42:48 Defining user and post schemas with required fields 2:45:34 Using models to create and manage users and posts. 2:51:44 Adding images to post and handling conditional rendering 2:54:59 Changing created date and displaying it 3:01:01 Using different metadata for better SEO 3:03:41 Using dynamic title and description in Next.js 14 3:09:31 Creating a new user by handling server actions with form data. 3:12:38 Adding a new post to the database using MongoDB and Next.js 3:18:44 Utilize API routes for complex applications 3:21:34 Creating dynamic routes for Next.js APIs 3:27:33 Learning Next.js 14 authentication 3:30:12 Setting up GitHub authentication for Next.js 14 app 3:36:14 Using API routes with Next.js for endpoint handling. 3:38:53 Implementing logout functionality with Next.js 3:44:17 GitHub authentication and user database connection process 3:47:08 Updating user validation and model field for social media authentication 3:53:22 Implementing password hashing for security 3:56:12 Implementing hashed password for user authentication and handling errors 4:01:50 Handling errors and using middleware for redirecting users 4:04:59 Using the useFormState hook to prevent user input duplication 4:10:28 Using success state to redirect user to login page 4:13:24 Creating a login form with username and password fields. 4:19:15 Using Next.js middleware to handle user permissions and access control 4:21:47 Creating authorization rules using off function 4:27:26 Updating session token for user authentication 4:30:14 Handling different page and user scenarios 4:36:08 Creating admin and user forms with Next.js 14 4:40:57 Adding a delete button and implementing form actions. 4:47:13 Creating a form with post title, description, and image input fields, plus error handling. 4:50:32 Creating a new user form with input fields and select element. Crafted by Merlin AI.
Thank you for your very good teaching ❤️❤️❤️❤️❤️ If possible, a tutorial with the title Create a student dormitory management where students can register individually or in groups to get a dormitory
Hello Lama Dev, thank you for this excellent video! Could you please share your Visual CODE extensions you are using, especially the one pre filling/suggesting code while typing please?
Hi friends, if you are interested in a React/Next.js Master Course, you can join the wishlist: list.lama.dev
Can you do project with Graphql,TypeScript,Docker and MERN ?
You need to start doing this production focused tutorials in typescript. It is hard to keep ot as references for the future since not company will deplot in javascript, and this will go just for personal projects, or to fall in tutorial hell. It would be more helpful to do the tutorial how company are using it so we can reference part of the video later.
if possible can you provide notes
signed up. great videos, but recommend TS over JS
Copilot is annoying pls remove
I cannot possibly thank you enough for this incredible tutorial. I was just appointed technical lead on a new project for my job, and we decided to use NextJS for it. Using what I learned from this short lesson made my look like a friggin badass to leadership! Thank you so much and keep up the great work!
nice
This is actually the perfect course at the perfect time !!!
Thank you.
Broo I haven't started with next js is this video enough to learn next js I know react pretty well
@@beastgamer2k474 yes
@@pavanMudavath822 I am comfortable in mern, how much time will it take for me to learn nextjs from this tutorial
it is really great that you didn't jump from styling , styling is the most important aspect of an app that needs the best attention and practices.
yes but
I really like that you make the graphs in real time so it's easy to follow your train of thought and it feels more engaging than someone reading off premade stuff.
just finished your blog app tutorial, but realized i need to learn the basics more, and now this video is here at right time.
Like what ? Because I am also thinking to watch this video. I know the basic JS and React is it enough? and If I follow this is will it become proper website ?
One thing I lov about this guy is the fact that he uses vanilla CSS... instead of using CSS frameworks like bootstrap or tailwind. welldone man
Hands down best Next course. Things like hydration which aren't talked about much but create a lot of errors are discussed very well.
Sir I have no words for you to make such a detailed video and I love your practical approach to explain each concept step by step. I have seen many tutorial videos on RUclips they just typed but never tried to explain. Hopefully, please continue these types of videos as this is really beginner friendly, so I would like more videos like this in the upcoming 2024. Thank you 🙇
I'm not sure if anyone is having a similar issue, but for some reason when you are doing imports (at least in my app) the jsconfig.json "paths" values needs to also be present in the tsconfig.json file otherwise the "@/" imports will eventually stop working. This may not have been the case when this video was first released, but this happened to me. Hope this saves someone some time because I spent a good hour rereading directory names that I knew were correct LOL
Lama is the best teacher ...words can't express how grateful and thankful I am...😊😊
I just completed your previous two next js videos and make a blog website
As a former Maths teacher, i am grateful to find your videos on youtube as your explanation is excellent. Thanks a lot Lama Dev :) Tesekkurler.
usually i stopped watching tutorials due to getting stuck in the so call tutorials hell. but i notice that what make this one special than the rest is that there are many new take way tips that are directly related to Nextjs. the caching , the SSR and so on, when i finished the overall development, the performance was way to fast, all the load and fetching was happening at a fast phase, definitely useful for future project. definitely worth the time spend
loved it. I love it when he says let me add background color because most of you guys watch at night and it hurts eyes.
hahahaha
Hats offff!!
Great Tutorial , This is my first Next tutorial and i always go through the docs before watching a Tut on RUclips❤
All this time I was waiting to receive notifications from Lama Dev and finally arrived. Thank you Lama Dev. Love your RUclips channel.#nextjs14
thank you for not skipping the design part, even if I prefer using tailwind css
What an absolutely incredible course! Better than most I've seen. I learned a lot :)
Best tutorial on RUclips. Can you complete the course with another video about the deployment?
Hi LamaDev, thanks for the great tutorial! I got a great amount of value from this 😁 You missed something small at the end, when creating a new user from admin panel the isAdmin attribute is not passed to addUser server action function so all users created will be not admin by default.
I have learned much from this channel. Every video is unique and related to real life projects. Thanks lama dev.
Thank you so much for this course! I have followed your youtube for a year. I really like the practices and how you explained it in your video. Thank you so much and Keep posting and Coding!
we miss heavy tutorials like this ❤😊
I missed u so much Lama sir everyday i was looking for your new video and finally now your new video 😊🎉 you're the best Lama ❤ kindly build an e-commerce app with next js 14 i need it sir 😢
Best video so far in 2024. Hoping more in the future Lama!
This came right at the perfect time. I've been trying to figure out how to add Google authentication in NextJS 14. I haven't even started the course, but I know from experience that it is going to be high quality.
OMG IT"S AN AMAZING VIDEO! The timing is perfect and it clearly explained everything! It's only 5 hours but took me 5 days to learn it. I like it!
Thank you so much. Never seen a tutorial so clear and comprehensive ! Incredible work.
This was a great tutorial and I loved how you showed every step even though you debated it at one point. Glad you showed every little step.
Мега шикарне відео, думаю буду передивлятися багато разів)
Thank you so much for this amazing tutorial. It's one of the best Next.js tutorials on RUclips. Big love, and keep up the excellent work!
Lama is one of my most loved great tutors. You have held me by my hands in this tech journey. I'm grateful sir
React redux with JWT Authentication - Sign up, Login, Logout & Private Route(access and refresh token redux state management ).how to handle token or session(state management redex store) in enterprice level application ....thanks in advance bro ... eagarly waiting bro..create enterprice level small application ( like ecommerce with cover all topics bro)
Awesome Next.js tutorial, Lama! Clear explanations and practical examples. Excited to implement what I've learned. 👍🚀 #NextJS #Lama
Possibly the best teacher on RUclips🎉
This is very well structured and explained. Thanks!
This is the perfect Next js course to watch,
but i would highly suggest learning MERN stack before diving into Next js as a fullstack since you will be creating REST API's and communicating with the database
Completed this course in 4 weeks, Learn a lot. Thanks for this amazing course.
I’ve watched a LOT of tutorials. This was by far the most helpful and thorough.
Very clear and good way of explanation, such an amazing tutorial for a beginner
This is such an amazing video and a coincidence becuz i was planning on learning next js i searched and ur vid was 22hours ago nice its also well explained !!!
Hands down, the best NextJs tutorial out there
I just started and I can already tell this is a great tutorial. Thanks.
Thank you, this is actually the perfect course at the perfect time!
One of the best explanation i've ever heard! Thanks a lot! Like and subscription!
Best teacher ever❤
40:27 you can config tailwind to have a short className too, liks css, you can configure a short className including all the features inside
You are literally god for begginers❤❤❤
Great tutorial. Helped me to finally understand rendering and hydration
I am unable to connect with mongodb atlas please give me suggestion to. Connect with mongodb atlas
US
Right Content at right time
Thank you for this tutorial. next video can you do a next js typescript tutorial?
❤ Love from India 🇮🇳
3:23:02 if any on getting "no http method not exported" error, use "export async function GET(request) {}"
THHANKKSSS MANNNN!!!!! I VERYY LOVE YOU!!! THIS COURSE IS THE BEST COURS IN THE ALL RUclips!
This video is so beneficial to learn new concepts in Next.js. Thanks for it.
man you're the best teacher ♥ please i'm facing problems deploying through gh-pages with the dynamic pages and stuff.
a tutorial would be most appreciated please
i would like to see separate video about authorization, to understand how it works, it is most complicated thing for me
Perfecto para terminar el año y comenzar el 2024 con pie derecho
I repeat. This guy is a genius 🙌
Could you do a list of all the extensions you use ? The one that does auto complete suggestions seems handy.
the best video to teach next.js I ever seen, thx.
Very good tutorial, beginner-friendly.
Thank you so much for this amazing tutorial. great teacher
Thank GOD to bring you into the world !!!
your videos are great, I build my app and use what i don't know through your tutorials. would you consider doing a new unit testing tutorial with modern nextjs in the future ?
Thank you so much for this course! I Please provide information regarding monorepo strategy and microfront as well as executing monorepo with Next.js.
Hi Lama, thanks for this. It helped me understand how to work with api in app router.
thanks a lot !!!!! your tutorial always helps me clear my concepts.
Amazing Course and perfect timing! Thanks beast 💪
Excellent! I want to run this example locally, but I'm new to MongoDB. Can you help by providing your Env file (with comments on how to set this up for my own session) and a quick walk-through of MongoDB setup requirements please?
hey lama! thank you so much for this video! much needed!!
Thank You for this great video and explanation !!! This video TOP-1 for me!
Great tutorial... Hope tutorials will be in typescript in future ❤
Thank you from Madagascar 🇲🇬
great teacher for next14 , thank you lama
The best tutor on RUclips 🙌
Thanks!
Thanks for the wonderful video and nice explanation...
Much appreciated bro!
Love to see Full Stack projects with Next.js & Backend SaaS ( supabase/appwrite ) [ CRUD , Auth ]
Thanks for the course. I'll repay you once I start getting paid well.
I love the way you take your time to teach us.
❤ Thank you so much Lama 🎉
00:02 Next.js 14 tutorial covers app setup, data fetching, authentication, and server actions.
02:54 Creating a Next.js app and customizing the installation
08:21 Next.js app structure and routing
11:28 Creating nested routes and dynamic routes in Next.js
18:03 Using a main layout for all pages to avoid repetitive components
20:30 Using common components with layouts
25:26 Using the Link component to fetch pages before clicking the links.
28:20 Create custom loading and error layouts for better user experience.
33:27 Defining variables for styling
35:56 Styling components and setting layout with CSS
40:57 Setting up styles for the layout and links
43:25 Creating a component using a CSS file and handling dynamic class names
48:54 Implementing user authentication and authorization
51:43 Creating a responsive menu with user interaction
56:55 Adding responsiveness for container size
1:00:01 Optimizing images using next.js image for better performance.
1:05:30 Configuring remote images for Next.js application
1:08:33 Creating text and image containers with components
1:14:57 Styling the footer section
1:18:02 Creating layout and styling using Flexbox and CSS
1:24:16 Styling design elements and creating components
1:27:36 Creating a postcard with two sections
1:33:32 Styling adjustments for phone size and long content
1:36:58 Creating layout for user profile view
1:43:03 Fixing overflowing footer and styling layout
1:46:11 Next.js allows both server-side and client-side rendering.
1:52:32 Server-side rendering vs. client-side rendering
1:55:20 Next.js provides flexibility in combining server and client side components.
2:00:42 Using isClient to run component on client side in Next.js
2:03:23 Preventing hydration problem in Next.js components.
2:09:11 Prefetching and navigating in Next.js 14
2:11:48 Using the refresh method to refresh the current route
2:17:39 Using Json placeholder, fetch and display data from a fake API in Next.js
2:20:39 Caching and data storage options in Next.js
2:26:05 Creating a post user module and fetching user data using user ID patching
2:29:20 Using suspense and data caching in Next.js 14
2:35:11 Using MongoDB as the data source instead of creating an API.
2:37:45 Connecting to MongoDB using Mongoose for creating models and establishing connection.
2:42:48 Defining user and post schemas with required fields
2:45:34 Using models to create and manage users and posts.
2:51:44 Adding images to post and handling conditional rendering
2:54:59 Changing created date and displaying it
3:01:01 Using different metadata for better SEO
3:03:41 Using dynamic title and description in Next.js 14
3:09:31 Creating a new user by handling server actions with form data.
3:12:38 Adding a new post to the database using MongoDB and Next.js
3:18:44 Utilize API routes for complex applications
3:21:34 Creating dynamic routes for Next.js APIs
3:27:33 Learning Next.js 14 authentication
3:30:12 Setting up GitHub authentication for Next.js 14 app
3:36:14 Using API routes with Next.js for endpoint handling.
3:38:53 Implementing logout functionality with Next.js
3:44:17 GitHub authentication and user database connection process
3:47:08 Updating user validation and model field for social media authentication
3:53:22 Implementing password hashing for security
3:56:12 Implementing hashed password for user authentication and handling errors
4:01:50 Handling errors and using middleware for redirecting users
4:04:59 Using the useFormState hook to prevent user input duplication
4:10:28 Using success state to redirect user to login page
4:13:24 Creating a login form with username and password fields.
4:19:15 Using Next.js middleware to handle user permissions and access control
4:21:47 Creating authorization rules using off function
4:27:26 Updating session token for user authentication
4:30:14 Handling different page and user scenarios
4:36:08 Creating admin and user forms with Next.js 14
4:40:57 Adding a delete button and implementing form actions.
4:47:13 Creating a form with post title, description, and image input fields, plus error handling.
4:50:32 Creating a new user form with input fields and select element.
Crafted by Merlin AI.
The master is back lads !
12:00 quality of explanations is insane! udemy level.
You are awesome. Lots of love form India 😁
nicely tutorial, hope u more blessed lama dev.
Awesome! Many thanks.
Wow boss is back timely with appropriate topic. Thanks
Thank you for your very good teaching ❤️❤️❤️❤️❤️ If possible, a tutorial with the title Create a student dormitory management where students can register individually or in groups to get a dormitory
@LamaDev is amazing teacher...
i just ADORE your content
thanks for the course you really help us w this videos keep it up man
Thank you for the detailed explanation..
Great video as always! Just missing parallel and intercepting routes I think. Ever thought about making a video to cover that?
Best teacher ever!!!thanks
Big Salute to you bro. 👏👏👏
Hello Lama Dev, thank you for this excellent video! Could you please share your Visual CODE extensions you are using, especially the one pre filling/suggesting code while typing please?