I would say this could probably be the best intro to Next.js on YT. Bc this is coming from someone who really knows how Next is built on top of the React library!
Dude I just paused at 12 and a half minutes to comment on how thankful I am to find this video. It is the explanation I have been searching for as someone who is trying to understand this tech stack. Thank you so much!
I just got the pop up notification that you released this video. Immediately, I clicked on it with a “this is too good to be true”, and yet, Lee, here we are. Thank you! Let’s go.
Thanks so much for the great content. I’m a vanilla web dev hobbyist wanting to level up and your channel is a God send!! I found your chan from an interview you did and I struck gold!!
You did a really phenomenal job with this. Like legitimately you cleared up 10+ things I was still totally confused about after having watched probably over 1000 YT vids on web dev. And they were not even the main topic of your video. Salud.
This is an excellent video, thank you for creating it! Explanations were clear and struck just the right balance of detail without going too far into any particular weeds.
Excellent tutorial. Really enjoyed the clear explanations and demonstrations. I'd love to see more content from you, especially diving into intermediate to advanced topics. It would be immensely helpful if you could provide examples of real-world applications to accelerate our understanding and application of these concepts. Looking forward to the next video. 👍
I commented on Lee's post on X suggesting that someone from Vercel should create a beginner friendly tutorial about NextJs. He responded with this video. This video is extremely underrated! I can't understand why it has only 65K views. Thank You Lee for this video. You have no idea how thankful I am for this ♥️
Holy moly, a big thanks for this tutorial! I currently have a fairly large website with around 3,000 daily visitors that was built by a freelancer. However, I want to learn how to manage it on my own so that I can add new features and updates. I'm going to grab a cup of coffee and watch this now. thanks again!
Great video, Lee! That was a great refresher back into how much server components help facilitate a fast and well structured MVP for any demo purposes, plus the excellent addition of postgres, revalidation and a well-performant UI. I'd like to see up next a demo of the `next-backend`, where it is abstracted out of the jsx, independent to add any rest endpoint to our client requests. I will try this `next-backend` out myself and maybe replace a known-in-the-field-backend(i.e. Django, SpringBoot). I'm interested in your thoughts. Thanks!
I started learning Next.js last tuesday (I know React quite well from before). I have done one very small project on my own in my own way, now i will do this and learn the "correct" way 🤓 30min in and it is really great and i can tell already that i feel more comfy with Next.
Very good video again by you, thank you for being a good educator. Also I think you need to make a video like this (or maybe more complex project but again explaining the features) again with the new features; it would be very nice. Also, I have always had a problem understanding authentication and separating Next.js and React. After learning React from the docs, as recommended, I chose a framework: Next.js. But now, I'm not sure if I can say I know React. I've always built projects with Next.js, but I started to doubt if I can apply for jobs that are looking for a React developer.
Hi Lee! Amazing tutorial! Learned a lot of new things despite having worked with React and Next.js! I have one question: at 1:16:52 you talked about clearing out the form on submission, but I'm confused as to how you would do that as we aren't using any client-side state. I feel like I'm missing something here and would love to hear your thoughts on this. Thank you!
Can you share your settings or extension you use to autocomplete your function RootLayout like we see at 5:45, this would greatly help follow you in real time. Great Video
Hey Lee great vedio watched from start to end with hand on practice. Can u plz tell which Extensions u are using for nextjs seems like writing code is much easier with it.
Hello, I'd like to know if there is a way to compile such a node js based code into a simple exe. I'm having a hard time finding a working tool as Node only supports CommonJS. Thanx a lot in advance!
heres a postgres query yall can use to seed the data -- reset -- DROP TABLE answers; -- DROP TABLE quizzes; CREATE TABLE IF NOT EXISTS quizzes ( quiz_id SERIAL PRIMARY KEY, title VARCHAR(255) NOT NULL, description TEXT, question_text TEXT NOT NULL, created_at TIMESTAMPTZ DEFAULT NOW() ); CREATE TABLE IF NOT EXISTS answers ( answer_id SERIAL PRIMARY KEY, quiz_id INT REFERENCES quizzes(quiz_id) ON DELETE CASCADE, answer_text TEXT NOT NULL, is_correct BOOLEAN NOT NULL ); INSERT INTO quizzes (title, description, question_text) VALUES ('Programming Quiz 1', 'A quiz about programming concepts', 'What is a variable?'), ('Programming Quiz 2', 'Another quiz about programming concepts', 'What is the most common loop construct in programming languages?'), ('Programming Quiz 3', 'Yet another quiz about programming concepts', 'What is the main difference between a compiler and an interpreter?'), ('My Quiz', 'A quiz about geography', 'What is the capital of Brazil?'); INSERT INTO answers (quiz_id, answer_text, is_correct) VALUES (1, 'A container for storing data.', true), (1, 'A programming language.', false), (1, 'A mathematical operation.', false), (2, 'For loop', true), (2, 'While loop', false), (2, 'Do-while loop', false), (3, 'A compiler is faster, while an interpreter is more flexible.', false), (3, 'There is no real difference, they both achieve the same outcome.', false), (3, 'A compiler generates machine code, while an interpreter executes the code line by line.', true), (4, 'Rio de Janeiro', false), (4, 'Brasilia', true), (4, 'São Paulo', false);
lovely content Lee! Now all the pieces finally clicked into place for an iOS dev trying to learn next. What is the auto completion tools name btw? Anyone knows what tool/ai it is that fills suggestions smartly
Hello Lee, I'm Guilherme, I have some questions about the Next.Js caching system. 1 - Do data searches using fetch with the Authorization header invalidate the cache? 2 - If I have a static rendered page at the time of build, is it possible to revalidate its data fetch with the revalidate option? 3 - When using the fetch revalidate option, if I pass a value like 60 * 10, is it a valid value?
This way of querying the database feels like 15 years ago, when we used to do those insecure raw queries in PHP. 👀 I expected that I would never see them again. The same applies to the MVC design pattern.
Was attempting to follow along but when it got to the database section, I got a bit lost - is there a file you can reference for the database you used for the quiz information?
@@leerob One more request Lee, can you bring a video on CSR, SSR ("use client", "use server" ) , how they are different. Still not getting this.. thanks
Hello Lee. I use the previous months' NextJs. However, I'm still unable to fully comprehend how NextJs' new features handle APIs. Could you thus create a tutorial for the Next API routes using various user inputs, submit a request, and receive a response?
This is something Tailwind is working on! tailwindcss.com/blog/2023-07-18-tailwind-connect-2023-recap#:~:text=We%E2%80%99re%20making%20Tailwind,postcss%2Dimport.
I'm a beginner I have some questions tho, if someone can answer it I really appreciate it, Idk how works the server "side " with the database conection, I mean in the video you show us how to implement it but how can I do it in the right way? I am confuse about that but overall it was a great video, I learned a lot, thanks.
This is like my early days of PHP coding :D. No offense, I use Next.js all my projects. May be in the future, there will be models, views and controllers in Next.js full-stack project.
It depends on what you're trying to build, but most of the time, starting with a server component makes sense (hence the default). But for some client, interactive things, you'll want client components. Client components are not a bad thing either :) Both are okay.
Using both routes is pointless and I didn't like how the important key point on that is skipped. That the window refreshes between pages and app routers making it impossible to migrate an enterprise app to a new router gradually.
Hi Lee. Greetings. Can you please make a super powerful video on authentication and authorization ( included email validation and verification) from scratch in Next.js without using any auth providers like nextAuth or clerk? Please Lee
I don't like how we handle loading state in server actions by making a separate component as compare to Remix where we use useNavigation() hook to handle loading states of forms.
I would say this could probably be the best intro to Next.js on YT. Bc this is coming from someone who really knows how Next is built on top of the React library!
I agree
Dude I just paused at 12 and a half minutes to comment on how thankful I am to find this video. It is the explanation I have been searching for as someone who is trying to understand this tech stack. Thank you so much!
I just got the pop up notification that you released this video. Immediately, I clicked on it with a “this is too good to be true”, and yet, Lee, here we are. Thank you! Let’s go.
Thanks so much for the great content. I’m a vanilla web dev hobbyist wanting to level up and your channel is a God send!! I found your chan from an interview you did and I struck gold!!
You did a really phenomenal job with this. Like legitimately you cleared up 10+ things I was still totally confused about after having watched probably over 1000 YT vids on web dev. And they were not even the main topic of your video. Salud.
This is an excellent video, thank you for creating it! Explanations were clear and struck just the right balance of detail without going too far into any particular weeds.
Awesome intro Lee, very refreshing from the ground-up explanation. Keep up the awesome work as always 🥷
Appreciate it 😁
@@leerobit'll be whole videos series or just one video
Excellent tutorial.
Really enjoyed the clear explanations and demonstrations.
I'd love to see more content from you, especially diving into intermediate to advanced topics.
It would be immensely helpful if you could provide examples of real-world applications to accelerate our understanding and application of these concepts. Looking forward to the next video. 👍
I commented on Lee's post on X suggesting that someone from Vercel should create a beginner friendly tutorial about NextJs. He responded with this video.
This video is extremely underrated!
I can't understand why it has only 65K views.
Thank You Lee for this video. You have no idea how thankful I am for this ♥️
Hardest working guy in the bunch!
@@vincentjohnflorio no doubt!
Holy moly, a big thanks for this tutorial! I currently have a fairly large website with around 3,000 daily visitors that was built by a freelancer. However, I want to learn how to manage it on my own so that I can add new features and updates. I'm going to grab a cup of coffee and watch this now. thanks again!
If you have any questions, please let me know!
Great introduction. Worth every minute. Thank you!
Any chance of a tutorial/guide on how you set up your Postgres DB?
Lee please make few more videos like this, this is amazing small project and explanation
Good to see this course Lee. I started learning React because of your course only. You are awesome :)
This video is amazing! Also, yes please do more long form tutorials! Thank you so much! 🙏
Excellent. Thanks Lee. Please do this kind of video from time to time
Lee, your videos always help me tremendously. This one is no exception. Thank you!
Appreciate it!
Great video, Lee! That was a great refresher back into how much server components help facilitate a fast and well structured MVP for any demo purposes, plus the excellent addition of postgres, revalidation and a well-performant UI. I'd like to see up next a demo of the `next-backend`, where it is abstracted out of the jsx, independent to add any rest endpoint to our client requests. I will try this `next-backend` out myself and maybe replace a known-in-the-field-backend(i.e. Django, SpringBoot). I'm interested in your thoughts. Thanks!
This tutorial is DOPE !
Thanks Lee. So many concepts in a short tutorial time.
I started learning Next.js last tuesday (I know React quite well from before). I have done one very small project on my own in my own way, now i will do this and learn the "correct" way 🤓 30min in and it is really great and i can tell already that i feel more comfy with Next.
Overwhelmed with gratitude for Lee
Excellent -- covered everything so nicely... best video ever!!!
hey man, this is really an awesome intro!!!
Hi Lee, Great video as usual.
Can you try to make an Authentication in NextJS tutorial aswell ? Would really appreciate it.
Very good video again by you, thank you for being a good educator. Also I think you need to make a video like this (or maybe more complex project but again explaining the features) again with the new features; it would be very nice. Also, I have always had a problem understanding authentication and separating Next.js and React. After learning React from the docs, as recommended, I chose a framework: Next.js. But now, I'm not sure if I can say I know React. I've always built projects with Next.js, but I started to doubt if I can apply for jobs that are looking for a React developer.
can you share the code for setting up postgres tables to follow along?
Excellent tutorial! thank you very much! it helped me in the transition from pages router and postgrade.
This the best. Next.js course, love it
Hope one day, you will decide to write a book on Next.js
Hi Lee! Amazing tutorial! Learned a lot of new things despite having worked with React and Next.js! I have one question: at 1:16:52 you talked about clearing out the form on submission, but I'm confused as to how you would do that as we aren't using any client-side state. I feel like I'm missing something here and would love to hear your thoughts on this. Thank you!
github.com/leerob/leerob.io/blob/54c6c4ff68297a54dbf965ef08f7fd256daac2fb/app/guestbook/form.tsx#L16
@@leerob thank you!
That url redirect with the query parameter `?show=true` was slick haha
I watched it full. Great tutorial!
😂
@@27sosite73 Watched at 10x speed 😂
Can you share your settings or extension you use to autocomplete your function RootLayout like we see at 5:45, this would greatly help follow you in real time. Great Video
Love this one , everything is crystal clear 😍😍🙏👌
awesome tutorial! got me back into sql after using firebase for the longest time lol
3:17 It's not laziness, its called efficiency! You've saved yourself so many unneccesary keystrokes with this little alias.
How many introductions there are to React nowadays really tells how defunct the community is actually.
next ecommerce template deserve video like this
@Lee_Robinson which VS Code extensions you are using?
Your videos are great! Thanks for sharing. Any chance you’d share a link to the camera you use? Production quality is on point.
Great; thank you!
Zooming the UI in though would be fantastic. It's very difficult to see on mobile 🙂
Hey Lee great vedio watched from start to end with hand on practice. Can u plz tell which Extensions u are using for nextjs seems like writing code is much easier with it.
Amazing intro ! 😍
Thanks for the tutorial Lee. Can you increase the font size of your code editor? Thank you!
Hey Lee, what is your VS Code theme? It looks so nice! It would be great if you could make a video showcasing your VS Code and terminal setup haha 👾
Hello, I'd like to know if there is a way to compile such a node js based code into a simple exe. I'm having a hard time finding a working tool as Node only supports CommonJS. Thanx a lot in advance!
Great video, Lee! Thanks for the amazing content. I wonder what is the theme that you are using? 👀
heres a postgres query yall can use to seed the data
-- reset
-- DROP TABLE answers;
-- DROP TABLE quizzes;
CREATE TABLE IF NOT EXISTS quizzes (
quiz_id SERIAL PRIMARY KEY,
title VARCHAR(255) NOT NULL,
description TEXT,
question_text TEXT NOT NULL,
created_at TIMESTAMPTZ DEFAULT NOW()
);
CREATE TABLE IF NOT EXISTS answers (
answer_id SERIAL PRIMARY KEY,
quiz_id INT REFERENCES quizzes(quiz_id) ON DELETE CASCADE,
answer_text TEXT NOT NULL,
is_correct BOOLEAN NOT NULL
);
INSERT INTO quizzes (title, description, question_text)
VALUES
('Programming Quiz 1', 'A quiz about programming concepts', 'What is a variable?'),
('Programming Quiz 2', 'Another quiz about programming concepts', 'What is the most common loop construct in programming languages?'),
('Programming Quiz 3', 'Yet another quiz about programming concepts', 'What is the main difference between a compiler and an interpreter?'),
('My Quiz', 'A quiz about geography', 'What is the capital of Brazil?');
INSERT INTO answers (quiz_id, answer_text, is_correct)
VALUES
(1, 'A container for storing data.', true),
(1, 'A programming language.', false),
(1, 'A mathematical operation.', false),
(2, 'For loop', true),
(2, 'While loop', false),
(2, 'Do-while loop', false),
(3, 'A compiler is faster, while an interpreter is more flexible.', false),
(3, 'There is no real difference, they both achieve the same outcome.', false),
(3, 'A compiler generates machine code, while an interpreter executes the code line by line.', true),
(4, 'Rio de Janeiro', false),
(4, 'Brasilia', true),
(4, 'São Paulo', false);
thanks a lot mate
The capital of Brazil is Brasilia though. The most common loop is the For loop. Peace.
@@AlexWebLab it was all mr. gpt man I swear 😅
Made the edits
@@destocot1729In any case, thank you so much. It has been very useful. ❤
lovely content Lee! Now all the pieces finally clicked into place for an iOS dev trying to learn next. What is the auto completion tools name btw? Anyone knows what tool/ai it is that fills suggestions smartly
Hello Lee, I'm Guilherme, I have some questions about the Next.Js caching system.
1 - Do data searches using fetch with the Authorization header invalidate the cache?
2 - If I have a static rendered page at the time of build, is it possible to revalidate its data fetch with the revalidate option?
3 - When using the fetch revalidate option, if I pass a value like 60 * 10, is it a valid value?
@lee what vscode theme do you use?
One Dark Pro Monokai Darker
awesome tutorial keep it as simple as possible
Thank you!
This way of querying the database feels like 15 years ago, when we used to do those insecure raw queries in PHP. 👀 I expected that I would never see them again. The same applies to the MVC design pattern.
Was attempting to follow along but when it got to the database section, I got a bit lost - is there a file you can reference for the database you used for the quiz information?
Mind explaining how you did the pnpm install for those who don't know the shortcuts?
what extension is helping with the predictive text?
The cursor movement is very smooth, how is it achieved?
光标移动很顺滑，怎么做到的？
Great tutorial, thank you!
Exceptional!! Thanks
Sir is this a single video or a playlist either way you are best ❤
Nice. Thanks for this Lee!
So when is React2028 / NextJS2028 being released? I'm ready for another BA Lee Robinson free course!😂
Can we expect a svelte/kit version of this?
Great video Lee, can you bring more content on APIs with nextjs, I am not getting this with documentation.
thanks..
Are you using Server Actions? They can replace most usage of writing API endpoints manually in Next.js now.
@@leerob One more request Lee, can you bring a video on CSR, SSR ("use client", "use server" ) , how they are different. Still not getting this..
thanks
Great video!
I'm a beginner. Just what i was looking for.
Could someone please mention the vscode theme Lee used.
Lee is the king 👑
soo good but the database part i didnt know how to go about things
Hey man, Is this still useful given the recent changes of react ?
which vscode theme do you use?
sharp as always, :-)
How to make protected route in next js 14?
Hello Lee. I use the previous months' NextJs. However, I'm still unable to fully comprehend how NextJs' new features handle APIs. Could you thus create a tutorial for the Next API routes using various user inputs, submit a request, and receive a response?
Hey! Did you make it through this video to where I talk to server actions?
Love this!
I find it very confusing that the files in different directories have the same names: page.tsx, layout.tsx.
20:30 No Tailwind config in the future? 👀
This is something Tailwind is working on! tailwindcss.com/blog/2023-07-18-tailwind-connect-2023-recap#:~:text=We%E2%80%99re%20making%20Tailwind,postcss%2Dimport.
I'm a beginner I have some questions tho, if someone can answer it I really appreciate it, Idk how works the server "side " with the database conection, I mean in the video you show us how to implement it but how can I do it in the right way? I am confuse about that but overall it was a great video, I learned a lot, thanks.
Why didn't you use @vercel/postgres? Is it for a different purpose?
The `postgresql` package works with any Postgres provider: Neon, Supabase, Digital Ocean, etc!
this is awesome!
Thanks a lot!It helped me~
This is like my early days of PHP coding :D. No offense, I use Next.js all my projects. May be in the future, there will be models, views and controllers in Next.js full-stack project.
exactly mine feelings
What coding assistant were you using in this video?
Copilot
How to do file uploads?
Which service did you use for online DB?
Neon, which is integrated into Vercel!
vercel.com/docs/storage/vercel-postgres
do you have a course I can take?
i'm here to like the awesome video
nice one lee
if we are get a tutorial mongodb with next.js .Its would be very helpful for us .
does vercel run on aws or google cloud?
aws
The font is so small in your vs code that not useful 😢
Tweet Id is not working for me
It's been difficult for me to understand where and when I should use the server component
It depends on what you're trying to build, but most of the time, starting with a server component makes sense (hence the default). But for some client, interactive things, you'll want client components. Client components are not a bad thing either :) Both are okay.
Using both routes is pointless and I didn't like how the important key point on that is skipped. That the window refreshes between pages and app routers making it impossible to migrate an enterprise app to a new router gradually.
I think this guy knows a thing or two about React and Next.js
Hi Lee. Greetings. Can you please make a super powerful video on authentication and authorization ( included email validation and verification) from scratch in Next.js without using any auth providers like nextAuth or clerk? Please Lee
Yeah! For now, I have a version of NextAuth working here github.com/leerob/leerob.io
I don't like how we handle loading state in server actions by making a separate component as compare to Remix where we use useNavigation() hook to handle loading states of forms.
AMAZING!!!!!
'touch' command works for Windows as well, dude
do you offer paid coaching?😅😬
My hero🎉🎉🎉🎉