Next.js 14 Complete Course 2024 | Next.js 14 Full Stack App Tutorial for Beginners

[@LamaDev]

Hi friends, if you are interested in a React/Next.js Master Course, you can join the wishlist: list.lama.dev

[@sujithrajan223]

Can you do project with Graphql,TypeScript,Docker and MERN ?

[@theangelofspace155]

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.

[@034belesushilkumar8]

if possible can you provide notes

[@koreandude]

signed up. great videos, but recommend TS over JS

[@Gunz1234]

Copilot is annoying pls remove

[@Phabulouso]

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!

[@howTo_79]

nice

[@I_AM_Greatness]

People like you are worth the effort!

[@jian-was-here]

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.

[@MrEstelz]

Thanks!

[@duygukoksal9900]

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.

[@1mt4y]

This is actually the perfect course at the perfect time !!! Thank you.

[@beastgamer2k474]

Broo I haven't started with next js is this video enough to learn next js I know react pretty well

[@pavanMudavath822]

@@beastgamer2k474 yes

[@anantsharma2916]

@@pavanMudavath822 I am comfortable in mern, how much time will it take for me to learn nextjs from this tutorial

[@dawsonjones8310]

the best video to teach next.js I ever seen, thx.

[@quadriadisa8288]

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

[@suraj351]

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 KZbin 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 🙇

[@oghenefejiroprinceimene6090]

Lama is the best teacher ...words can't express how grateful and thankful I am...😊😊

[@Leesdjo]

All this time I was waiting to receive notifications from Lama Dev and finally arrived. Thank you Lama Dev. Love your KZbin channel.#nextjs14

[@mujeebshami8700]

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

[@blogvadimguk]

Мега шикарне відео, думаю буду передивлятися багато разів)

[@xzex2609]

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.

[@samoltman]

yes but

[@WebDevDaveHari]

Hands down best Next course. Things like hydration which aren't talked about much but create a lot of errors are discussed very well.

[@ffzz007]

Great Tutorial , This is my first Next tutorial and i always go through the docs before watching a Tut on KZbin❤

[@destocot1729]

thank you for not using tailwind I appreciate using regular css every now and then i feel i got too comfy with tailwind so its nice to have more separation of code

[@codery01]

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!

[@nehalpradhan2229]

just finished your blog app tutorial, but realized i need to learn the basics more, and now this video is here at right time.

[@dhavalparikh2960]

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 ?

[@marcusfenix55]

thank you for not skipping the design part, even if I prefer using tailwind css

[@najibullah440]

I have learned much from this channel. Every video is unique and related to real life projects. Thanks lama dev.

[@fsahinbas]

Teşekkürler.❤

[@lesaverman]

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

[@nickHanson101]

this tutorial is very easy to understand and well structured. highly recommended for anyone wants to learn next js.

[@paramkumar5288]

have u completed this video? It is a beginner- freindly course or not? Please reply.

[@nickHanson101]

@@paramkumar5288 yes, i have completed the course. if you know React, you can start this course right away

[@JustCoNa]

@@paramkumar5288 "Next.js 14 Full Stack App Tutorial for Beginners" no mate its for advanced users only

[@ravitejam99]

@@paramkumar5288 its beginner friendly

[@pklass4859]

@@paramkumar5288 have you completed this video and is it beginner- friendly?

[@TenzDelek]

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

[@BlueHat1]

What an absolutely incredible course! Better than most I've seen. I learned a lot :)

[@Sushizz79]

Thank you so much. Never seen a tutorial so clear and comprehensive ! Incredible work.

[@MrEstelz]

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!

[@carlosg8716]

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.

[@exoticcoder5365]

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

[@azizdev216]

Thank you so much for this amazing tutorial. It's one of the best Next.js tutorials on KZbin. Big love, and keep up the excellent work!

[@ritikkumar-o7h]

@LamaDev proud of you giving container width instead of max-width it could save so much media queries you give

[@zhengweing]

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.

[@stefanopulze]

Best tutorial on KZbin. Can you complete the course with another video about the deployment?

[@nayemalifahim6701]

I just completed your previous two next js videos and make a blog website

[@emmanuelgatica4998]

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.

[@iankaire4559]

Possibly the best teacher on KZbin🎉

[@tripolar-3794]

The prediction about " I know some of you watch this at Night " was too real. You deserve an award for that Sir ! Amazing BootCamp by the way :) .

[@lennonbenedictjansuy]

Best video so far in 2024. Hoping more in the future Lama!

[@flnnx]

This is very well structured and explained. Thanks!

[@blazemates]

3:23:02 if any on getting "no http method not exported" error, use "export async function GET(request) {}"

[@wadallace]

I’ve watched a LOT of tutorials. This was by far the most helpful and thorough.

[@Glowpropertyzone]

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.

[@mithunyadav8495]

Completed this course in 4 weeks, Learn a lot. Thanks for this amazing course.

[@Gunz1234]

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

[@ukandieudo7514]

Lama is one of my most loved great tutors. You have held me by my hands in this tech journey. I'm grateful sir

[@abdrahim9307]

we miss heavy tutorials like this ❤😊

[@itsammarmirza]

Hands down, the best NextJs tutorial out there

[@luke8983]

I just started and I can already tell this is a great tutorial. Thanks.

[@ibraheemareeda7706]

Best teacher ever❤

[@andrewmclennan84]

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?

[@Getitfast2]

Hey @LamaDev !! Love the challenge. One suggestion from a noob: *** When you're changing screens, can you scroll the whole vsCode page. I'd want to be able to confirm I didn't miss something. (you have several 'shortcuts/snippets' and I noticed that when you do those, I lose 3 days trying to find that missing piece that I didn't know was missing (lol/jk))>>> As I said, I love the challenge! This has been kicking my butt... but I am starting to get it...slowly. Thank you for putting together a great program!

[@PopoolaMuhammed-u1f]

yo bro...pls where can i find the images for this tutorial, cant find them in the repo

[@muzamilfootballer5682]

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 😢

[@sergls3528]

One of the best explanation i've ever heard! Thanks a lot! Like and subscription!

[@MiladJoodi]

I am very inspired by reading the comments and now I want to start.♥

[@adityazende6710]

Right Content at right time

[@HoangNguyen-pg6rl]

Thank you, this is actually the perfect course at the perfect time!

[@coder5336]

Great tutorial. Helped me to finally understand rendering and hydration

[@montecristo31]

THHANKKSSS MANNNN!!!!! I VERYY LOVE YOU!!! THIS COURSE IS THE BEST COURS IN THE ALL KZbin!

[@rongaming8103]

You are literally god for begginers❤❤❤

[@xnub]

Could you do a list of all the extensions you use ? The one that does auto complete suggestions seems handy.

[@ragucool9468]

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)

[@oYwyh]

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

[@cosme30]

Very clear and good way of explanation, such an amazing tutorial for a beginner

[@frenchmike]

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 ?

[@IamDarkAngeL1]

The master is back lads !

[@codenus2797]

This video is so beneficial to learn new concepts in Next.js. Thanks for it.

[@mondlimkhanyiswa1206]

The best tutor on KZbin 🙌

[@snehitshh]

which extensions are you using?if somebody else knows it would be of great help too!

[@bakasenpaidesu]

❤ Love from India 🇮🇳

[@peky-dj7ys]

Thank you from Madagascar 🇲🇬

[@YellowHeart-tw8eo]

hey lama! thank you so much for this video! much needed!!

[@Richard_Kocanda]

Amazing Course and perfect timing! Thanks beast 💪

[@draXX_4048]

Hey, great video! Have you thought about using Tailwind CSS? It can really simplify your workflow and make styling much easier compared to vanilla CSS. Plus, it helps with responsiveness and design consistency. Would love to see it in action in your next project!

[@mondlimkhanyiswa1206]

I repeat. This guy is a genius 🙌

[@lucasnunes1526]

Great video as always! Just missing parallel and intercepting routes I think. Ever thought about making a video to cover that?

[@Ali-qj9yv]

Best teacher ever!!!thanks

[@chibuzoekwue]

Been waiting for this

[@Dannynguyen.e-commerce]

Thank GOD to bring you into the world !!!

[@jokerbanny]

❤ Thank you so much Lama 🎉

[@hedonesr]

great teacher for next14 , thank you lama

[@victoreleanya4375]

Hi Lama, thanks for this. It helped me understand how to work with api in app router.

[@myshoestravelinaustralia2653]

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?

[@hercialVitalis]

I love the way you take your time to teach us.

[@mostafafartaj7270]

Thank you so much for this course! I Please provide information regarding monorepo strategy and microfront as well as executing monorepo with Next.js.

[@davronmaxmudov3972]

Anyone from 2024 ?)

[@syed.simanta820]

From 2050

[@atharvadeshmukh6328]

😂

[@syed.simanta820]

I'm from 2050 and using a better framework based on php. Don't know guys why you are after nextjs lol. Server query seems like php syntax

[@nahrulk]

Bruh 😂

[@nahrulk]

​@@syed.simanta820no reason, it's just mean you start learn to code early before us 😂. I don't event know why i should using php because my first language is JavaScript. Well who cares, just code 🎉

[@Хулиородригес]

Thank You for this great video and explanation !!! This video TOP-1 for me!

[@ayoubdev8019]

i just ADORE your content

[@enriquesalomon8197]

Big Salute to you bro. 👏👏👏

[@mhqmarques]

@LamaDev is amazing teacher...

[@md.shahebali38]

Wow boss is back timely with appropriate topic. Thanks

[@nyctophillia2292]

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

[@ritamehra3186]

You are awesome. Lots of love form India 😁

[@miraksiaram8640]

Hi Lama, why have you deleted video with react course + tailwind ??

[@youssefoubrik5254]

Very good tutorial, beginner-friendly.

[@SunidhiChouhan-nm8bh]

thanks a lot !!!!! your tutorial always helps me clear my concepts.

[@dayababuchinthaguntla6847]

Excellent tutorial man!! Your are awsome.........I have followed the entire code but after successfull login still it is showing the error in terminal like ---> Error: NEXT_REDIRECT..should we do something more

[@GCS__MuhammadPutraPratama]

nicely tutorial, hope u more blessed lama dev.

[@Trippy7275]

Hi @LamaDev - Thanks once again for your so ever engaging courses. I was wondering if you could please share the link to the ExcaliDraw diagrams?

[@srdjanstancic1163]

Brother, from all of those, this is the one !