Learn Next.js 13 With This One Project

[@CleverProgrammer]

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]

One pro code appreciating another pro coder real bro Code 😂

[@noahthegreat190]

🤣🤣🤣

[@kaviruhapuarachchi8566]

noice

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

8

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

This video has a 1.2x speed or something

[@Beny123]

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

[@nushydude]

Helps when one can type fast 😊

[@spencerhepworth]

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]

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

[@miervaldis42]

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

[@ohmygoodness6773]

Well, for his example it's not really important

[@GhostkillerPlaysMC]

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

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

[@urnan7499]

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.

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

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

[@r34ct4]

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

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

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

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

[@chillwavefrequency8108]

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

[@chantalchen1908]

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!

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

[@faizbyp]

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

[@keithlamontdavis8047]

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!

[@MYM861]

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

[@AliAliOxenFree]

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

[@WilliamSelznick-OIT]

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]

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

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

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

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

[@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+.

[@kanishkart9923]

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

[@NathanBudd]

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.

[@kazettique]

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)

[@pakeeranam]

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.

[@dotpegaso138]

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.

[@soubestre]

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

[@ludame]

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]

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

[@SamK329]

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

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

[@johnadriandodge]

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

[@shubhambagul3127]

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

[@AissaDev]

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

[@boosboop]

This video was amazing! Thank you so much for the great content and breaking things down the way that you do!

[@AmandaGxagxa]

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

[@mahfoudh_arous]

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

[@joss8558]

Great tutorial, concise and fast, covered a lot.

[@tonykharioki6913]

if you're having an error with redirect, you can use a variable for create function i.e const res = await prisma.todo.create({ data: { title, complete: false } }) if (res) { redirect('..') }

[@mikhacavin]

thanks a lot man, it works

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

[@philb8032]

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

[@ronaldronald8819]

I like this. Tanks for the upload. it is getting me up to speed fast 🙂

[@bahibrahim101]

Kyle's tutorials are the only ones in youtube that I don't dare watch on speedX2

[@MrDragos696]

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

[@gini77oo]

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

[@stacked-dev]

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

[@bmehder]

NextJS looks really similar to SvelteKit with the file based routing. I wish there was a meta framework that handled SSR, CSR, SSG, and allowed developers to use their choice of components (i.e., Solid, React, Vue, Svelte, etc.)

[@itanio]

Are you a fan of Astro? It's probably headed that direction.

[@bmehder]

@@itanio I do like Astro, but it is primarily for static sites if I understand correctly. I also like Svelte's stores, and I am not sure if that works with Astro.

[@8koi245]

I think you are referring to islands, not even sure if I got the name right tho, Blue collar coder has a couple of videos on that

[@m1r342b2r]

You explain is very clearly! Thank you so much!

[@protosssc790]

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

[@charlescarvalhodeaguiar87]

You are the best Kyle, thanks for everything!

[@nicolettifps]

Thank you from brazil, make more this short projects

[@francisboudreau7524]

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👏🏻👏🏻👏🏻

[@kamilzowczak3607]

Yes man, we needed it!

[@paras.developer]

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

[@shakiljoy8661]

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

[@benwhite2795]

18:48 when you say you're going to copy in classNames but the classNames that you past in for the input box don't match the classNames on any other component, and you cut the video without showing what you're copying, people are going to go crazy trying to figure out where you are copying from and never find it.

[@eltonvilanculo5452]

Awesome 👏 👏 👏 , however i didn’t manage to update Todo in real time after creation

[@rjwhite4424]

dude you are a godsend

[@DanielZheng-lf9yt]

Run into a tricky problem. After creating a new todo, the new todo doesn't show up. But the project downloaded from your repository works fine.

[@DanielZheng-lf9yt]

solve it by add "revalidatePath('/')" before "redirect("/")"

[@filmyguyyt]

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

[@jnayehsirine6222]

Great Explanation , thank you for the contribution

[@trungtranthanh8912]

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

[@СергейАмпилов-я3н]

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

[@ai_coding]

Awesome tutorial. Great explanation on everything 💯

[@dr__ey]

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

[@carafachera4781]

THANKS IS WHAT I NEEDED RIGHT NOW 💙

[@bobevskiboban]

ty sir , as always great and simple , salute

[@estebanfelipe3980]

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

[@mesfinmulgeta6060]

Thank you BIG brother!

[@Guilherme-yd8zd]

Amazing tutorial!

[@redbutton2002]

Thank you verry much for this lesson!

[@bestteam4805]

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

[@aamirmalik5468]

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

[@ikazak]

thanks for the tutorial!

[@kevins7621]

What happens if adding new items and todo listings are on the same page? How to update user input simultaneously after user adding it. Good video btw~!

[@raniaeljouhari9319]

Amazing tutorial, as usual !

[@ASTech-w5f]

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

[@haluamen4640]

amazing explanation.

[@piyushaggarwal5207]

Thanks for the video!

[@naman_dw]

Next 13.4 is too confusing for me as of now. it seemed straight forward until I actually started a project with it and nothing was working as expected. for e.g. everywhere in the docs it says that 'use client' means the component will be rendered only on client, but logs of components marked with 'use client' are also being logged on server. Using it with Supabase pre built Auth UI, the styles are taking some time to load, so on first load unstyled component is being displayed, looking very ugly. And then there is the N+1 problem fetching data in server components. I think I prefer the old Next JS with TRPC. Will stick with it for now. If anyone has answer to the questions I have above then please help me out. Thanks

[@blazi_0]

Client components are rendered in user browser using JavaScript Server components are rendered in the server and results sent to user device When u use server component it's npm packages are actually not sent to the user browser but in client it's sent When u use "use client" that means it's now client component and u can use states and other JavaScript apis that are only available in the client components

[@blazi_0]

For the css loading thing i encourage u to use some kind of loading state for that client component, wait until the component loads with it's css then render it

[@daleryanaldover6545]

next13 client and server actions have nothing to do with N+1 sql calls AFAIK, you have to fix/optimize the queries you are making to the database.

[@naman_dw]

@@blazi_0 Thanks. But why are 'use client' components console logging on the server as well? Shouldn't their console logs only be seen in the browser?

[@hafsahayathh]

@@naman_dw if the client component is inside a server component, the client component is still rendered on the server but it ships javascript to the client (as opposed to server components - they don’t send any javascript to the client). I hope that clarifies your confusion

[@RockyWearsAHat]

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

[@DevCypherYT]

Awesome video 🎉

[@Deligium]

thanks for awesome content! good guitars by the way🤘

[@alvarobyrne]

ty

[@spongebob93lover]

hi, would love to see a video about nextjs 13 with state management, using SWR

[@MrVipulLal]

Great video. Many 🙏

[@wecharg]

Really cool! Imagine what you could do with impossibly low fees and this structure?

[@SilvestreVivo]

It is very interesting to see how NextJs is adopting things from SvelteKit.

[@Danstrom9252]

Wow Kyle, just wow!

[@noeldolan518]

Great tutorial! :)

[@bonnes04]

Great content as always. I think this title doesn't do justest to what you did in this video.

[@elijahandrew6790]

THANK YOU, kYLE!!!

[@pixyoutube538]

Thank you so much bro..

[@suti1979]

Great video, but I think it's missing one important part. What if we delete a todo? How should the (todo items) state mutate then?

[@seojungood]

on the await prisma.todo.change({where: {id} data: complete}) line just change it to await prisma.todo.delete({where: {id}})

[@suti1979]

@@seojungood i know how to use prisma, the question was abaout the state change, since prisma "runs on the server"...

[@TheRealAstro_]

Did u ever work this out?

[@suti1979]

@@TheRealAstro_ yepp , revalidatePath()

[@trongnhantran7330]

Nice video man

[@codewithsaj9270]

great video. learned a lot

[@syedhaider0916]

Nice work, you told in this video that we can’t use the redirect from next js in the toggleTodo server action but you used redirect in createTodo server action. Both are server actions but in one you told us that we can’t use redirect and in the other you yourself used the redirect what the difference please clarify.

[@mihai10stoica]

You can use it in form actions. If you were to call the function directly (like on button click) it would give you an error.

[@howardwu4653]

@@mihai10stoica why is that? I have been trying to make a delete button for this but stucked for hours already

[@DarkMooN-uh1ih]

thank you for the tutorial, i learnt a lot

[@taunado]

Excellent, thanks!

[@Smarteez83]

These "use server" and "use client" are crazy ! Next, how to deploy ?

[@tiendang5149]

Very good speed run :D

[@randygulak9432]

Great job on this!