Learn Next.js 13 With This One Project

Рет қаралды 365,193

Күн бұрын

React Simplified Course: reactsimplified.com
Next.js is constantly evolving and one of the biggest updates is the addition of server components and server actions. This video goes over all the new Next.js 13 changes and how you can use these new features to create a simple todo list application.
📚 Materials/References:
React Simplified Course: reactsimplified.com
GitHub Code: github.com/WebDevSimplified/n...
Prisma Crash Course Video: • Learn Prisma In 60 Min...
Singleton Video: • Singleton Pattern - De...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:44 - Setup
01:50 - Database Setup
05:45 - Remove Boilerplate Code
07:20 - Next.js 13 Routing
08:35 - Home Page
10:41 - Server Component Data Fetching
17:34 - New Todo Page
20:24 - Server Actions (Forms)
25:20 - Server Actions (Buttons)
#NextJS #WDS #ReactJS

Пікірлер: 434

@CleverProgrammer 9 ай бұрын

I just screenshot 21:52. That tells me EVERYTHING I need to know haha. Dude amazing explanation. I was fighting moving to 13.4 next so hard now I'm fucking excited to hop in!

@chetandivekar1813 9 ай бұрын

One pro code appreciating another pro coder real bro Code 😂

@noahthegreat190 8 ай бұрын

🤣🤣🤣

@kaviruhapuarachchi8566 5 ай бұрын

noice

@joak-web Жыл бұрын

Just found this channel, and honestly didn't think it was possible to condense so much info in such a small amount of time. Well done, mate.

@kevin8798 11 ай бұрын

This video has a 1.2x speed or something

@Beny123 11 ай бұрын

@@kevin8798 Kyle's videos are very information dense beware. Don't speed up unless you are already familiar with the topic.

@nushydude 6 ай бұрын

Helps when one can type fast 😊

@chillwavefrequency8108 10 ай бұрын

So glad that you created this channel! I needed a crash course to get started on a new project. Thanks a lot Kyle!

@orashusedmund7675 Жыл бұрын

thanks Kyle, i just started learning next a few days ago and with all these changes i've been so lost with even how to route😮‍💨, u a life saver man

@keithlamontdavis8047 9 ай бұрын

Another great tutorial. Quality teaching is a special skill and you are great at it. No fluff, easy to follow and thorough all at the same time. Thanks again!

@chantalchen1908 11 ай бұрын

Thank you so much for collecting the otherwise scattered information on learning Next.js. The TODO list example project is great in helping me getting into it as quickly as possible. Looking forward to more of your videos!

@r34ct4 7 ай бұрын

Wow, your pacing is incredible. I watch it, try to keep up, inevitably fall behind, but then I can just go back and watch back the last few seconds. It's fast, but re-watching is fast too, so I end up learning faster by replaying parts over and over

@urnan7499 11 ай бұрын

I have to say that after hours of browsing and searching, this is the only quick and in depth tutorial i have found. Every other tutorial either is literally useless at explaining whats going on and speeds through everything like a robot or is just too long.

@eliyahutarab4862 Жыл бұрын

just amazing the way you can create client side component but the function that is realy like on click/change is been created as a server action on the server just mindblowing

@JBurky15 Жыл бұрын

Awesome tutorial, I've been really interested in learning Next.js recently and this really helped kick start that process for me. Keep making awesome content, Kyle!

@chrisbolson Жыл бұрын

I’m in exactly the same position. I “know” that I need to learn next.js but I keep putting it off. I think that this excellent tutorial might just be the one that finally makes me do it!

@VIJAY-hg7ei Жыл бұрын

@@chrisbolson hey can u help me with this real quick peer class isn't working for me if i check the box the style are not applying

@omerfarukbilgin2157 11 ай бұрын

@VIJAY hey it's been a while and you probably solved it, but if you haven't solved it yet, can you share your input tags' codes in the todoItem component? Maybe I'll be able to help.

@faizbyp 11 ай бұрын

thank you very much for the tutorial! i always get confused when it got to server component but you explain it clearly

@codeofcodedotorg Жыл бұрын

How many todo lists does it take to get a job?

@whITe_dEVIL_06 Жыл бұрын

😅

@rockNbrain Жыл бұрын

😂

@Sameer.Trivedi Жыл бұрын

Clearly not enough, you also need ten thousand blog websites.

@Faisal-ge2bk Жыл бұрын

Yes

@soundrightmusic Жыл бұрын

@2trcvgb Жыл бұрын

I just started to leran Nextjs in my new workplace( re-wrapping react with Next +tailwind) thank you. Just saved your video in my offline youtube repository

@virgoeun 7 ай бұрын

Thanks! I am a beginner and learned controlling server side using only express js but many are saying that next js is getting really popular and I thought there must be reasons for its popularity and now I KNOW! :D so cool - that I could get to learn basic of next js and even typescript as well through your tutorials. Thank you again, and I will keep an eye on your videos and course for sure !!!!!

@avelinecash Жыл бұрын

Thanks Kyle. I learned so much from this video. Maybe also add the CRUD operations? That would be great.

@diegovalencr Жыл бұрын

This was amazingly well summarized. I can't believe you packed so much in a 30 min video and everything was still very clear!

@kanishkart9923 Жыл бұрын

Kindly keep up the good work kyle. Your videos are really helpful. Looking forward to this video...

@joss8558 11 ай бұрын

Great tutorial, concise and fast, covered a lot.

@AliAliOxenFree 11 ай бұрын

Prisma is fantastic at handling dozens of tables with complex relationships! thanks for this vid buddy

@soubestre 6 ай бұрын

Congratulations for your videos, they are amazing for anyone willing to learn webdev ! Thank you mate !

@AmandaGxagxa 11 ай бұрын

Awesome tutorial I have learnt a lot from this in a very shot period. Thank you so much

@spencerhepworth 11 ай бұрын

I really like that you pay attention to CSS throughout your videos. A lot of tutorial people blow through it and don't emphasize the importance of style. Thank you for making it important.

@Sneaadler 10 ай бұрын

Meanwhile: *Him copy pasting in '"css'" and saying "this is not really important" 🤐

@miervaldis42 10 ай бұрын

@@Sneaadler He did explain other CSS snippets, like before and after the part you mentioned though 😶

@ohmygoodness6773 10 ай бұрын

Well, for his example it's not really important

@GhostkillerPlaysMC 9 ай бұрын

@@Sneaadler Probably better that he didn't obsess over every minute detail in the styling as if he were completing a project for $$. Especially since the point of the video has nothing to do with css, I think the amount he did touch on it was great

@Sneaadler 9 ай бұрын

@@GhostkillerPlaysMC Yes ofc, I did not want him to

@mikemisiura3850 Жыл бұрын

Thanks for this! I was just searching your past videos for a next tutorial a couple weeks ago. 😊 I love your teaching style and explanations.

@ai_coding 11 ай бұрын

Awesome tutorial. Great explanation on everything 💯

@natbud7987 Жыл бұрын

What I didn't quite understand was, why we need to use "use server" if we're already inside of a server component (as all components in Next.js are server components by default, unless you use "use client" at the top of the component). Then I realized that a "server" component doesn't mean it does any actions on the server side - it just gets pre-rendered before being sent to the client. I'm building my very first full-stack app and understanding the interactions between frontend, backend and the database is a bit challenging.

@AhmadNadeem71 Жыл бұрын

Correct me if 'wrong. Not all components are server components. Only files in app folder are server side I think. But the components folder he created is outside app folder.

@AissaDev Ай бұрын

Thank you kyle, best explanation now next one of my favorites frameworks

@shubhambagul3127 5 ай бұрын

Nice learned in one video now can take a look at those docs Thanks man

@MrDragos696 7 ай бұрын

Thank you for this tutorial. I have finished it now. It very cool.

@charlescarvalhodeaguiar87 Жыл бұрын

You are the best Kyle, thanks for everything!

@francisboudreau7524 11 ай бұрын

Love your pace and straight to the point info… would love if you could make same sort of tutorial with next.js msal and apollo😇😇😇 anyway I’ll keep looking forward to your great work👏🏻👏🏻👏🏻

@m1r342b2r 2 ай бұрын

You explain is very clearly! Thank you so much!

@kazettique 8 ай бұрын

Thanks for this great tutorial about Next 13. I am going to joining the brand new Next.js recently. (Using Nuxt 3 in my job tho)

@NathanBudd 10 ай бұрын

This is really impressive! Looking at Vercel, they don't appear to support sqlite. It would be great if you could do a follow up video to this, showing how you could hook prisma up to something like planetscale.

@nicolettifps Жыл бұрын

Thank you from brazil, make more this short projects

@user-ku9wm5kg9c Жыл бұрын

Thank you for this video. It was very simple and useful 🤖

@shakiljoy8661 10 ай бұрын

Very much helping video. It helps me a lot. Thank you so much.

@mahfoudh_arous Жыл бұрын

Great Course as usual 🙏 Can you, please, make a course about deployment with Vercel?

@aamirmalik5468 10 ай бұрын

you r an awesome teacher. keep it up. thank you for so much informative video.

@kamilzowczak3607 Жыл бұрын

Yes man, we needed it!

@gini77oo 11 ай бұрын

THANK YOU! i hope you keep uploading tutos of CRUD, and deployment... !! THANKS LOT!

@johnadriandodge 11 ай бұрын

Jedi K, you are remarkably gifted with an unbelievable amount of Web Technologies!

@raniaeljouhari9319 11 ай бұрын

Amazing tutorial, as usual !

@jnayehsirine6222 6 ай бұрын

Great Explanation , thank you for the contribution

@carafachera4781 Жыл бұрын

THANKS IS WHAT I NEEDED RIGHT NOW 💙

@ZainRamzan-pt8cm 7 ай бұрын

O man u done a greate job . You packed so much info in a singal video

@dr__ey 9 ай бұрын

awesome video!! :) thanks so much for this explanation

@trungtranthanh8912 7 ай бұрын

It's a really helpful video. Thank you very much.

@estebanfelipe3980 Жыл бұрын

Great video as always! How would you deploy and application like this? I would love a video about it.

@lukas.webdev Жыл бұрын

Awesome Video! Thanks for sharing. 😉🔥

@randygulak9432 Жыл бұрын

Great job on this!

@Deligium Жыл бұрын

thanks for awesome content! good guitars by the way🤘

@protosssc790 11 ай бұрын

Thank you for the hard work to sharing these knowledgeable I’m finally can store something in a DB and fetch it and post it!!!!🎉!!!!!!!!!!!!

@user-kc3ed9ls8c 9 ай бұрын

I hope everyone realizes what an incredibly awesome teacher you are. This lesson is so clear, so on point, so perfect I can't thank you enough. My next move is to share this with other developers.

@rafatadebanjo9731 9 ай бұрын

pls where you able to link your prisma. I am having problems with this. It keeps give me errors.can you help?

@pakeeranam 10 ай бұрын

Thank you very much for the tutorial. Not sure if anyone has noticed that sometimes, new todo doesn't appear in Todo list after redirecting the page. The createSpecial function always adds new todo in psql table but sometimes not showing on the page.

@DarkMooN-uh1ih Жыл бұрын

thank you for the tutorial, i learnt a lot

@noeldolan518 5 ай бұрын

Great tutorial! :)

@tiendang5149 10 ай бұрын

Very good speed run :D

@ikazak 4 ай бұрын

thanks for the tutorial!

@redbutton2002 10 ай бұрын

Thank you verry much for this lesson!

@Guilherme-yd8zd 8 ай бұрын

Amazing tutorial!

@bobevskiboban 5 ай бұрын

ty sir , as always great and simple , salute

@piyushaggarwal5207 11 ай бұрын

Thanks for the video!

@taunado Жыл бұрын

Excellent, thanks!

@mesfinmulgeta6060 7 ай бұрын

Thank you BIG brother!

@DevCypherYT 6 ай бұрын

Awesome video 🎉

@codewithsaj9270 10 ай бұрын

great video. learned a lot

@haluamen4640 8 ай бұрын

amazing explanation.

@ylvakarlsson3391 7 ай бұрын

This is just awesome! Love your work Kyle - you have a great skill in being efficient and clear at the same time. I tried to create this project but I don't get the "src"-folder in there. Did I miss a step or is that something I need to create manually? I've trained frontend-development over this last spring but using Next.js is new to me. Thanks!

@vicez_ 6 ай бұрын

I created a new project using Next and the default option for "Would you like to use 'src/' directory?" was set to No, but in this video, the default is Yes, which he accepts. You probably selected 'No' for that option when you created the project. In my experience, using 'src/' is helpful in organizing your files.

@MrVipulLal 8 ай бұрын

Great video. Many 🙏

@sheldonsays9922 Жыл бұрын

Thanks for this. This was very informational. Just a thought. Could have cut down on explaining the styles. And instead covered other things like SSR, ISR and static. Would have been more complete and made this a one stop vid for all the major parts of NextJS 13+.

@andzi5419 9 ай бұрын

I liked, commented, scrubscribed. Great content buddy!

@paras.developer Жыл бұрын

this was great video now i don't have to mess with core react state

@filmyguyyt Жыл бұрын

oh no i was trying to learn and this guy uploaded it

@bestteam4805 Жыл бұрын

More react videos please. Learn React with this one project etc.

@RockyWearsAHat 8 ай бұрын

Wonderful tutorial for migrating to next from another language, explains alot about the system and how to use it without being bogged down by absolutely tons of unnecessary and outdated info. One question though? How do you get highlighting/autocomplete on variables that will be written inside of classnames? Like classname={‘${inter.className} …other-styles’}, what is the extension for the highlighting on the first part? I can’t find it

@user-rg1yq2vj6o Жыл бұрын

Very helpful with good explanations. Looking to this video : React state management i.e Redux

@rjwhite4424 11 ай бұрын

dude you are a godsend

@rohitsiwachroit 10 ай бұрын

Please keep up the great work

@imiebaka 11 ай бұрын

Kyle never disappoints Nice one

@dotpegaso138 9 ай бұрын

Great video! 🚨Bug alert! Due to Next cache decisions, it's important to add `revalidatePath('/')` inside the toggleTodo function in order to render the task list correctly after going back and forth to the New Task page and the Home page again.

@pixyoutube538 10 ай бұрын

Thank you so much bro..

@eliuddyn 11 ай бұрын

Amazing 🔥🔥

@zivtamary Жыл бұрын

I think it would've been even better if you made the main page client component, and split Todos to a separate server component with skeleton. that way the apps loads fast to the user, and we still get the benefits of ssr

@islambn8962 6 ай бұрын

but when you add a server component directly to a client component it will be converted to a client component. no? or do you mean with suspense

@ludame 10 ай бұрын

Thanks for the tutorial I found it helpful. Would of been nice if you added a delete option to round things off but I will give it ago which should cement my knowledge

@sayaksengupta4335 10 ай бұрын

async function deleteTodo(id:string) { "use server" await prisma.todo.delete({ where: {id}}) } add this in the TodoItem component, it should work.

@SamK329 6 ай бұрын

@@sayaksengupta4335 I tried doing that but the problem I ran into is that doesn't actually update the UI until I do a page refresh

@TheRealAstro_ 4 ай бұрын

@@sayaksengupta4335 I know this is months old but I'm pretty sure this doesn't work because you can't use a server component inside a client component. Because TodoItem is a client component you would need to add this function in the main page instead, and then pass it down to TodoItem (just like toggleTodo)

@henry_sparks 10 ай бұрын

I am curios to find out that if you are writing server side code in your component and interacting directly with your DB, does this mean we'll hardly ever need to use react hooks or and other 3rd party libraries for making HTTP requests like axios? Also, could you please do another video regarding best practices for working with next 13 and prisma covering how to use react hooks, managing performance and

@elijahandrew6790 11 ай бұрын

THANK YOU, kYLE!!!

@Danstrom9252 Жыл бұрын

Wow Kyle, just wow!

@user-tg4qn6ci6r 11 ай бұрын

Really nice!!!

@jasar.ayiken 11 ай бұрын

Thank u! absolutely made my life eaiser~

@hannah51238 Жыл бұрын

Thanks for a great video. Please feel free to ignore this question if its in the prisma video that I am about to watch... BUT, in my VS code, none of my schema is colour coded. Is there an extension I don't have or something I've not installed? The colours really help my brain! Thanks again! Edit for anyone else also wondering this... you need to download an extension through VS code.

@anatolijignatyo2308 7 ай бұрын

Hi Kyle, could you please share with me the list of extension what you use in VSC, or just that which shows that good hints when you typing class names, attributes etc?

@pixels7223 11 ай бұрын

you saved me, thank you.

@philb8032 10 ай бұрын

how have you learned all these things at such a young age? its really quite impressive

@noname-oo3xr 8 ай бұрын

Hi Kyle, many thanks for your great content, I followed your JS and React courses and I m looking forward for you to release a Next course. I m struggling for now with the next 13 app router, I can not get any client component to work out properly, I have no user interactivity. Is next 13 app router unstable and flaky ?... I don t see anything I missed following your tutorial, but can t make it work.

@playman69691 11 ай бұрын

Great tutorial! However, at 29:40 min - shouldn’t ‘getTodos()’ to be an async func with “use server” inside as well as toggleTodo(), since it performs a db query on the sever?

@user-qg7jz2xb2j 10 ай бұрын

Hi mate, I just wanting to ask how node recompiles automatically once that tsx page has changed at 6:16 For me its not recompiling, even though I saved it. Do you use extensions? Would be nice if you could release the extensions you (probably installed by default) have on your editor. Thanks :)

@nyzss Жыл бұрын

love ur vids

@danghuy3035 11 ай бұрын

Hi Kyle. Thanks for the tutorial. I have a question about the Add New functionality. Its clear that as you put it to a new page, and redirect after mutation which will trigger fetch func on Todos page. What if I have Add New as a modal, and no redirection is needed, how to refetch the data? thanks ahead for helping.

@MYM861 7 ай бұрын

I just decided to try out React / Next.js after reading about v.13, moved from Angular... Im sleeping better, im happier and life is just sunshine and rainbows