Introduction to Next.js and React

[@_ash64]

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]

I agree

[@kevinjhammond]

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]

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.

[@kerrykreiter445]

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

[@cusematt23]

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.

[@justincooper5024]

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.

[@78SuperWhite]

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

[@kaiser_the_emperor]

Great introduction. Worth every minute. Thank you!

[@ayoolafakoya9841]

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

[@EstheticallyPathetic]

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 ♥️

[@vincentjohnflorio]

Hardest working guy in the bunch!

[@EstheticallyPathetic]

@@vincentjohnflorio no doubt!

[@bulelaniponer]

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

[@leerob]

Appreciate it 😁

[@codelivewithme]

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

[@Grolliiitjk]

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]

If you have any questions, please let me know!

[@jitxhere]

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

[@jatinlodhi980]

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

[@erandasoori]

This video is amazing! Also, yes please do more long form tutorials! Thank you so much! 🙏

[@gvenkatakrishnan125]

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

[@imAskja]

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

[@leerob]

Appreciate it!

[@codewithguillaume]

This tutorial is DOPE !

[@destocot1729]

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

[@KristianTheDesigner]

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.

[@lfgraf]

Overwhelmed with gratitude for Lee

[@SergioBarreracoding]

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!

[@gurjotsinghpandher3908]

Excellent -- covered everything so nicely... best video ever!!!

[@saadowain3511]

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

[@abdullahinafiu6040]

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

[@pHscLoq]

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.

[@sayanmanna2511]

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

[@tawsifhaque9360]

@lee what vscode theme do you use?

[@marcusarnfastlauridsen]

One Dark Pro Monokai Darker

[@biLLie_wiLLie]

I watched it full. Great tutorial!

[@27sosite73]

😂

[@leerob]

@@27sosite73 Watched at 10x speed 😂

[@leanamaro]

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

[@keyboardbasher5769]

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

[@sahaneakanayaka3394]

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

[@t1ltrides]

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]

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

[@t1ltrides]

@@leerob thank you!

[@devinleggett]

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

[@harsh07may]

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

[@julientavernier1174]

Amazing intro ! 😍

[@theintjengineer]

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

[@HarlandBruggeman]

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

[@emretrn]

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

[@hd_1761]

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.

[@shendrong3695]

next ecommerce template deserve video like this

[@faizanahmed9304]

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

[@asadjakhar6618]

@Lee_Robinson which VS Code extensions you are using?

[@juancarlosqr]

Exceptional!! Thanks

[@chandima94]

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

[@CraigWilsonMusic]

Great tutorial, thank you!

[@Ilcohere]

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

[@1weiho]

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 👾

[@shinchanaddicts3572]

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

[@GiovanniOrlandoi7]

Great video!

[@dharmeshgohil9375]

awesome tutorial keep it as simple as possible

[@leerob]

Thank you!

[@jacobaustin881]

3:17 It's not laziness, its called efficiency! You've saved yourself so many unneccesary keystrokes with this little alias.

[@wadallace]

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?

[@Systemv1]

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

[@kenlee6434]

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

[@TheDigitalDam]

Love this!

[@guilhermedavid3232]

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?

[@timomartinson]

sharp as always, :-)

[@WuRicardo-up6tx]

Thanks a lot!It helped me~

[@kirso]

Can we expect a svelte/kit version of this?

[@teslimbello645]

what extension is helping with the predictive text?

[@muratyasar]

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

[@Sorkstryparen]

Lee is the king 👑

[@subem81]

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

[@sebestyenkaroly3395]

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!

[@MadisonKanna]

this is awesome!

[@francisera1]

nice one lee

[@zwelllll]

Could someone please mention the vscode theme Lee used.

[@nikako1889]

which vscode theme do you use?

[@omkarsheral8559]

Which service did you use for online DB?

[@leerob]

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

[@lostinthenarrativve]

Hey man, Is this still useful given the recent changes of react ?

[@toromanow]

What coding assistant were you using in this video?

[@AlexWebLab]

Copilot

[@landsman737]

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.

[@ranu9376]

AMAZING!!!!!

[@ruy.monteiro]

20:30 No Tailwind config in the future? 👀

[@leerob]

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.

[@nicobobb]

How to make protected route in next js 14?

[@GimhanDissanayake-s5v]

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]

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

[@AndresBedoya]

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

[@leerob]

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

[@zksumon847]

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

[@mattz_zeref]

i'm here to like the awesome video

[@gauravsharma597]

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

[@leerob]

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

[@gauravsharma597]

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

[@toromanow]

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

[@nickpiraino3781]

do you have a course I can take?

[@kishanbsh]

How to do file uploads?

[@ikbo]

does vercel run on aws or google cloud?

[@korkmazsalim]

aws

[@mystickago]

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

[@randomforest_dev]

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]

exactly mine feelings

[@maduemeka6982]

My hero🎉🎉🎉🎉

[@danieliski36]

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.

[@TalisonBrendon]

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

[@leerob]

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.

[@y9uta]

Tweet Id is not working for me

[@codedusting]

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.

[@maccodifavole]

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

[@destocot1729]

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);

[@parrurox01]

thanks a lot mate

[@AlexWebLab]

The capital of Brazil is Brasilia though. The most common loop is the For loop. Peace.

[@destocot1729]

@@AlexWebLab it was all mr. gpt man I swear 😅

[@destocot1729]

Made the edits

[@AlexWebLab]

@@destocot1729In any case, thank you so much. It has been very useful. ❤

[@HfvTdg]

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

[@ashimov1970]

'touch' command works for Windows as well, dude

[@dewanmohammademon]

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

[@tamsssss6765]

do you offer paid coaching?😅😬

[@yashguma]

Yes

[@zunnoorainrafi5985]

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.