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!
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 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
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.
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!
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 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.
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
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
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.
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.
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!
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
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!
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.
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+.
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.
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 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)
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.
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
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
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
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
@@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
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?
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👏🏻👏🏻👏🏻
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.
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 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.
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
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
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('..') }
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 :)
May I ask something ? How to server render in NextJS component ? Because all of my components using 'use client' to call MUI components For an example. I have categories in topnav based on API. Thank you for this great tutorial
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.
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.
we have nest js backend and are looking to move to next js on the front end (from CRA). Server components seem really cool and powerful, but I am trying to wrap my head around how they can be used with an API and without bypassing guards. Any tips?
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.
here i have a question, how to render a component if an list updated. because it won't be updated if i move to /new webpage and back to the main page. i need to refresh the webpage after each update to see changes. can anyone help how to do this?
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~!
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!
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.
