How To Master Next.js In 3 Steps (for beginners)

do you know react but haven't really worked with NEX TS and you are wondering where to start or what to learn first I have worked with nexs over 5 years now and I'm building production crate applications with it daily in this video I will show you three steps to take to master the core fundamentals of nextjs each step is actually a learning step for a core next TS feature or concept so without further Ado let's begin next TS has routing built in with the file system based routing mechanism traditionally we have had to use some kind of third party package for routing this usually has included making routing file that Maps the components and routes in our application with nexts things are a bit easier because the routing is defined by the files and folders in our projects app directory this makes creating new routes and finding a component for given route super easy so in this first step we should learn how the file system based routing Works in nextjs because routing is a key part of any application and by understanding the file-based routing we lay a solid foundation for our nextjs skills nextjs enables us to render parts of our application on the server traditionally in react our application has been rendered somewhat as follows first we have had to download the JavaScript bundle from the server to the client so to the browser then we have pared and executed that JavaScript and after that we have rendered the application in the browser with nexs we aren't limited to just rendering our code on the client but we can render parts of it on the server too and by default nexs actually renders everything on the server and we need to explicitly tell it if we want some of the components rendered on the client doing the rendering work on the server benefits for example data fetching security casting and SEO so in the second step we shall learn what servers side rendering means and how it works because understanding when the code is rendered on the server and when on the client and using both environments appropriately is intercal when building applications with nextjs before the third step I want to tell you about this week's sponsor Elgato they recently launched their new product family called Neo and if you aren't familiar with them Neo tools level up how you look sound and operate online they are Plug and Play so there is no setup required and I'm most excited about the stream deck now because I can add all my most important hot keys and commands to it and since it's so Compact and lightweight I like to have it also on me whenever I am working outside of my office and I'm actually this week working from a cotage and I have been using the stream deck Neo all the time here's a glimpse of what my stream deck Neo setup looks like so first I like to have my pomodora timer there then I have hotkey for opening up my vs code GitHub and chat GPT and then I have created a folder for my most used Cod Snippets and these are really super handy for software developers because I can just click the button on the stream de and it will input the text to my vs code and then I also have an emojis folder here so I can quickly input emojis anywhere I need them then since I have a lot of teams meetings I have the mute button binded here so I don't have to always open up the meeting window and click the mute uh which is super handy so this is my favorite setup for it of course I have other Pages here also for example controlling uh Spotify and other stuff so check out more info about all the Neo tools from the link in the description okay so we talked about learning the file system based routing in the step one nexts has two routers they are called app router and Pages router both use the file system based mechanism but they have differences in rendering strategies and conventions app router is the new router which uses latest features of nextjs pages router on the other hand is the Trad additional router which doesn't enable us to use all the latest features of nexs like server components for example so in this third step you need to figure out which router to learn first as a rule of thumb you should use app router when starting a new project if you know that you will be working on a project that uses the pages router then it might be a good to get familiar with it first but as said the app router is the new router with all new features will be published so if you don't have a strong reason to use PES router I would recommend learning and starting to use the app router start with these three steps and learning these three concepts and you will have a solid foundation to build your next year skills on if you want to learn more about nextjs and keep up with the latest features my newsletter is something you should probably subscribe to because on it I share more in-depth nextjs and web development content content that I don't talk about anywhere else I'll leave a link into the description if you want to check it out

Channel: Tuomo Kankaanpää

Views: 201

Keywords: next js tutorial for beginners, nextjs, next js, next js tutorial, next.js, next js 14, server components, next.js server components, vercel postgres, next js database, web dev simplified, fireship io, fireship, james q quick, josh tried coding, jack herrington, vercel, freecodecamp, theo, lee robinson, lee robinson next js, next js full tutorial, next 14, nextjs rendering, next js 13, nextjs problems, features of react js, react js vs next js difference

Id: m-76DCzX36U

Length: 5min 36sec (336 seconds)

Published: Tue May 28 2024