ฝัง
- เผยแพร่เมื่อ 15 ก.ค. 2024
- A hands-on introduction to the main Next.js and React concepts by building and deploying a real application.
0:00 - Introduction
0:29 - Requirements
2:24 - Package Managers
4:45 - Running Locally
6:33 - Fast Refresh
6:57 - Routers
7:57 - React
8:44 - JSX
10:14 - Components
11:15 - Props
12:25 - Composing
14:08 - Imports and Exports
15:36 - External Components
17:05 - Create Next App
19:09 - Directory Overview
21:57 - Layouts and Pages
26:36 - Routing
27:43 - Dynamic Routes
28:36 - next/link
30:34 - Reading Route Parameters
31:48 - Nested Layouts
33:51 - Installing Postgres
35:15 - Async Components (Data Fetching)
40:53 - Suspense + Caching
43:58 - Styling
48:16 - Quiz Pages
51:01 - Database Schema
51:49 - Displaying Quiz Answers
54:29 - Displaying Correct Answer (Server Action)
1:01:44 - Creating New Quizzes (Forms)
1:14:40 - Revalidating Data
1:17:04 - Deploying to Vercel
1:20:21 - Conclusion
Here are some additional resources:
- Next.js Courses: nextjs.org/learn
- React Course: react.dev
- Me: leerob.io - วิทยาศาสตร์และเทคโนโลยี
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
After 3 years, I just want to say thank you Next.js and Vercel for changing my life.
how did it change your life.
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!
Excellent. Thanks Lee. Please do this kind of video from time to time
Good to see this course Lee. I started learning React because of your course only. You are awesome :)
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.
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. 👍
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.
Lee, your videos always help me tremendously. This one is no exception. Thank you!
Appreciate it!
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
Lee please make few more videos like this, this is amazing small project and explanation
Thanks Lee. So many concepts in a short tutorial time.
Any chance of a tutorial/guide on how you set up your Postgres DB?
This tutorial is DOPE !
Excellent tutorial! thank you very much! it helped me in the transition from pages router and postgrade.
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.
Excellent -- covered everything so nicely... best video ever!!!
Love this one , everything is crystal clear 😍😍🙏👌
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!
Overwhelmed with gratitude for Lee
hey man, this is really an awesome intro!!!
Amazing intro ! 😍
Exceptional!! Thanks
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.
That url redirect with the query parameter `?show=true` was slick haha
This the best. Next.js course, love it
Hope one day, you will decide to write a book on Next.js
Great tutorial, thank you!
Love this!
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 is awesome!
Great video!
I watched it full. Great tutorial!
😂
@@27sosite73 Watched at 10x speed 😂
sharp as always, :-)
awesome tutorial! got me back into sql after using firebase for the longest time lol
Thanks a lot!It helped me~
awesome tutorial keep it as simple as possible
Thank you!
AMAZING!!!!!
nice one lee
Hi Lee, Great video as usual.
Can you try to make an Authentication in NextJS tutorial aswell ? Would really appreciate it.
Sir is this a single video or a playlist either way you are best ❤
Great video, Lee! Thanks for the amazing content. I wonder what is the theme that 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.
i'm here to like the awesome video
next ecommerce template deserve video like this
can you share the code for setting up postgres tables to follow along?
How many introductions there are to React nowadays really tells how defunct the community is actually.
My hero🎉🎉🎉🎉
Thanks for the tutorial Lee. Can you increase the font size of your code editor? Thank you!
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.
I'm a beginner. Just what i was looking for.
Lee is the king 👑
Great; thank you!
Zooming the UI in though would be fantastic. It's very difficult to see on mobile 🙂
Yes
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.
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 👾
Great
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
Nice. Thanks for this Lee!
So when is React2028 / NextJS2028 being released? I'm ready for another BA Lee Robinson free course!😂
Mind explaining how you did the pnpm install for those who don't know the shortcuts?
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!
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?
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.
soo good but the database part i didnt know how to go about things
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
The cursor movement is very smooth, how is it achieved?
光标移动很顺滑，怎么做到的？
@Lee_Robinson which VS Code extensions you are using?
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?
How to make protected route in next js 14?
Can we expect a svelte/kit version of this?
Could someone please mention the vscode theme Lee used.
GR8
@lee what vscode theme do you use?
One Dark Pro Monokai Darker
'touch' command works for Windows as well, dude
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
if we are get a tutorial mongodb with next.js .Its would be very helpful for us .
I think this guy knows a thing or two about React and Next.js
How to do file uploads?
What coding assistant were you using in this video?
Copilot
which vscode theme do you use?
Which service did you use for online DB?
Neon, which is integrated into Vercel!
vercel.com/docs/storage/vercel-postgres
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?
do you have a course I can take?
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.
does vercel run on aws or google cloud?
aws
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.
1:07:46 nice voice
Please make part 2 please.
What would you like to see in part 2?
@@leerob Error handling for calling api please
Check out server actions @@zhiven7484
@@leerobHow to optimised and make our NextJS app faster.
1:10:52
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
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.
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. ❤
20
The font is so small in your vs code that not useful 😢
do you offer paid coaching?😅😬
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.
this is an overcomplicated nightmare. the fact i have to install everything manually and set up the whole structure of the project manually when we have things like Vitejs is just outstanding how the web development field is crap and full of snobs pushing the new shiny thinhgs even tho is absolute crap.
This is the equivalent of Mozart uploading a tutorial on how to compose classical music on TH-cam
first nah
👀
@@leerob Hey, could you tell us if Vercel/React is working on some sort of AI assistant embedded in Next.js/React.js that can generate high-quality code? After watching the Fireship video, I had a significant discussion with friends about this. =( What would you say?