Introduction to Next.js and React

Подписаться 56 тыс.

Просмотров 59 тыс.

50% 1

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

Наука

Опубликовано:

29 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 143

@_ash64 6 месяцев назад

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!

@juanpabedoyav 6 месяцев назад

I agree

@huuphong_nguyen 6 месяцев назад

After 3 years, I just want to say thank you Next.js and Vercel for changing my life.

@jay_wright_thats_right 6 дней назад

how did it change your life.

@gvenkatakrishnan125 6 месяцев назад

Excellent. Thanks Lee. Please do this kind of video from time to time

@jitx2797 6 месяцев назад

Good to see this course Lee. I started learning React because of your course only. You are awesome :)

@kevinjhammond 6 месяцев назад

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!

@Wheeelie402 6 месяцев назад

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.

@imAskja 6 месяцев назад

Lee, your videos always help me tremendously. This one is no exception. Thank you!

@leerob 6 месяцев назад

Appreciate it!

@cusematt23 5 месяцев назад

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.

@ayoolafakoya9841 6 месяцев назад

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. 👍

@saadowain3511 5 месяцев назад

Thanks Lee. So many concepts in a short tutorial time.

@bulelaniponer 6 месяцев назад

Awesome intro Lee, very refreshing from the ground-up explanation. Keep up the awesome work as always 🥷

@leerob 6 месяцев назад

Appreciate it 😁

@codelivewithme 6 месяцев назад

@@leerobit'll be whole videos series or just one video

@78SuperWhite 6 месяцев назад

Any chance of a tutorial/guide on how you set up your Postgres DB?

@leanamaro 6 месяцев назад

Excellent tutorial! thank you very much! it helped me in the transition from pages router and postgrade.

@sahaneakanayaka3394 6 месяцев назад

Love this one , everything is crystal clear 😍😍🙏👌

@jatinlodhi980 6 месяцев назад

Lee please make few more videos like this, this is amazing small project and explanation

@codewithguillaume 6 месяцев назад

This tutorial is DOPE !

@sayanmanna2511 6 месяцев назад

hey man, this is really an awesome intro!!!

@lfgraf 6 месяцев назад

Overwhelmed with gratitude for Lee

@Grolliiitjk 6 месяцев назад

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!

@leerob 6 месяцев назад

If you have any questions, please let me know!

@julientavernier1174 5 месяцев назад

Amazing intro ! 😍

@KristianTheDesigner 6 месяцев назад

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.

@juancarlosqr 6 месяцев назад

Exceptional!! Thanks

@SergioBarreracoding 4 месяца назад

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!

@biLLie_wiLLie 6 месяцев назад

I watched it full. Great tutorial!

@27sosite73 6 месяцев назад

😂

@leerob 6 месяцев назад

@@27sosite73 Watched at 10x speed 😂

@TheDigitalDam 6 месяцев назад

Love this!

@GiovanniOrlandoi7 3 месяца назад

Great video!

@CraigWilsonMusic 3 месяца назад

Great tutorial, thank you!

@dharmeshgohil9375 6 месяцев назад

awesome tutorial keep it as simple as possible

@leerob 6 месяцев назад

Thank you!

@abdullahinafiu6040 6 месяцев назад

This the best. Next.js course, love it Hope one day, you will decide to write a book on Next.js

@pHscLoq 6 месяцев назад

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.

@timomartinson 6 месяцев назад

sharp as always, :-)

@MadisonKanna 6 месяцев назад

this is awesome!

@theintjengineer 6 месяцев назад

That url redirect with the query parameter `?show=true` was slick haha

@keyboardbasher5769 6 месяцев назад

awesome tutorial! got me back into sql after using firebase for the longest time lol

@harsh07may 6 месяцев назад

Hi Lee, Great video as usual. Can you try to make an Authentication in NextJS tutorial aswell ? Would really appreciate it.

@shinchanaddicts3572 6 месяцев назад

Sir is this a single video or a playlist either way you are best ❤

@WuRicardo-up6tx 2 месяца назад

Thanks a lot!It helped me~

@emretrn 6 месяцев назад

Great video, Lee! Thanks for the amazing content. I wonder what is the theme that you are using? 👀

@ranu9376 2 месяца назад

AMAZING!!!!!

@francisera1 2 месяца назад

nice one lee

@devinleggett 5 месяцев назад

Your videos are great! Thanks for sharing. Any chance you’d share a link to the camera you use? Production quality is on point.

@mattz_zeref 6 месяцев назад

i'm here to like the awesome video

@Ilcohere 6 месяцев назад

How many introductions there are to React nowadays really tells how defunct the community is actually.

@shendrong3695 6 месяцев назад

next ecommerce template deserve video like this

@destocot1729 6 месяцев назад

can you share the code for setting up postgres tables to follow along?

@hd_1761 6 месяцев назад

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.

@faizanahmed9304 6 месяцев назад

Thanks for the tutorial Lee. Can you increase the font size of your code editor? Thank you!

@maduemeka6982 6 месяцев назад

My hero🎉🎉🎉🎉

@Sorkstryparen 6 месяцев назад

Lee is the king 👑

@zksumon847 6 месяцев назад

I'm a beginner. Just what i was looking for.

@1weiho 5 месяцев назад

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 👾

@Systemv1 4 месяца назад

Great; thank you! Zooming the UI in though would be fantastic. It's very difficult to see on mobile 🙂

@subem81 6 месяцев назад

Nice. Thanks for this Lee! So when is React2028 / NextJS2028 being released? I'm ready for another BA Lee Robinson free course!😂

@landsman737 6 месяцев назад

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.

@muratyasar 4 месяца назад

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

@mdsaifulislamshanto4444 6 месяцев назад

Great

@t1ltrides 6 месяцев назад

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!

@leerob 6 месяцев назад

github.com/leerob/leerob.io/blob/54c6c4ff68297a54dbf965ef08f7fd256daac2fb/app/guestbook/form.tsx#L16

@t1ltrides 6 месяцев назад

@@leerob thank you!

@randomforest_dev 6 месяцев назад

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.

@landsman737 6 месяцев назад

exactly mine feelings

@danieliski36 6 месяцев назад

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.

@guilhermedavid3232 6 месяцев назад

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?

@mystickago 5 месяцев назад

soo good but the database part i didnt know how to go about things

@yashguma 6 месяцев назад

Yes

@chandima94 6 месяцев назад

Mind explaining how you did the pnpm install for those who don't know the shortcuts?

@wadallace 6 месяцев назад

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?

@gauravsharma597 6 месяцев назад

Great video Lee, can you bring more content on APIs with nextjs, I am not getting this with documentation. thanks..

@leerob 6 месяцев назад

Are you using Server Actions? They can replace most usage of writing API endpoints manually in Next.js now.

@gauravsharma597 6 месяцев назад

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

@jijieats 6 месяцев назад

I think this guy knows a thing or two about React and Next.js

@kenlee6434 6 месяцев назад

The cursor movement is very smooth, how is it achieved? 光标移动很顺滑，怎么做到的？

@kirso 6 месяцев назад

Can we expect a svelte/kit version of this?

@asadjakhar6618 Месяц назад

@Lee_Robinson which VS Code extensions you are using?

@ashimov1970 6 месяцев назад

'touch' command works for Windows as well, dude

@ZweL2001 6 месяцев назад

Could someone please mention the vscode theme Lee used.

@nicobobb 6 месяцев назад

How to make protected route in next js 14?

@dewanmohammademon 6 месяцев назад

if we are get a tutorial mongodb with next.js .Its would be very helpful for us .

@tawsifhaque9360 6 месяцев назад

@lee what vscode theme do you use?

@marcusarnfastlauridsen 6 месяцев назад

One Dark Pro Monokai Darker

@user-wu3vi3bj1u 6 месяцев назад

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?

@leerob 6 месяцев назад

Hey! Did you make it through this video to where I talk to server actions?

@chi-mf1cx 6 месяцев назад

GR8

@codedusting 6 месяцев назад

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.

@ruy.monteiro 6 месяцев назад

20:30 No Tailwind config in the future? 👀

@leerob 6 месяцев назад

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.

@prashlovessamosa 6 месяцев назад

Please make part 2 please.

@leerob 6 месяцев назад

What would you like to see in part 2?

@zhiven7484 6 месяцев назад

@@leerob Error handling for calling api please

@ayoolafakoya9841 6 месяцев назад

Check out server actions @@zhiven7484

@prashlovessamosa 6 месяцев назад

@@leerobHow to optimised and make our NextJS app faster.

@toromanow 5 месяцев назад

I find it very confusing that the files in different directories have the same names: page.tsx, layout.tsx.

@user-rd1jm5om3f 6 месяцев назад

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

@leerob 6 месяцев назад

Yeah! For now, I have a version of NextAuth working here github.com/leerob/leerob.io

@AndresBedoya 6 месяцев назад

Why didn't you use @vercel/postgres? Is it for a different purpose?

@leerob 6 месяцев назад

The `postgresql` package works with any Postgres provider: Neon, Supabase, Digital Ocean, etc!

@nikako1889 5 месяцев назад

which vscode theme do you use?

@kishanbsh 6 месяцев назад

How to do file uploads?

@mrthegamergp 6 месяцев назад

It's been difficult for me to understand where and when I should use the server component

@leerob 6 месяцев назад

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.

@omkarsheral8559 4 месяца назад

Which service did you use for online DB?

@leerob 4 месяца назад

Neon, which is integrated into Vercel! vercel.com/docs/storage/vercel-postgres

@zunnoorainrafi5985 6 месяцев назад

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.

@kevinoyunda 6 месяцев назад

1:07:46 nice voice

@ikbo 6 месяцев назад

does vercel run on aws or google cloud?

@korkmazsalim 5 месяцев назад

aws

@nickpiraino3781 5 месяцев назад

do you have a course I can take?

@HfvTdg 4 месяца назад

The font is so small in your vs code that not useful 😢

@y9uta 6 месяцев назад

Tweet Id is not working for me

@yasyaindra 6 месяцев назад

1:10:52

@tamsssss6765 6 месяцев назад

do you offer paid coaching?😅😬

@wriddhihazra 6 месяцев назад

This is the equivalent of Mozart uploading a tutorial on how to compose classical music on RU-vid

@kim92se64 4 месяца назад

@squirrelingaround 4 месяца назад

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.

@drivebuss8079 6 месяцев назад

I am so happy you used Javascript and but not the sh**t named Typescript.

@27sosite73 6 месяцев назад

first nah

@leerob 6 месяцев назад

👀

@27sosite73 6 месяцев назад

@@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?