What is Next.js and web development basics

In this course, we're going to master Next.js from start to finish. The reason why we're learning Next.js is because if you're a web developer and you're looking to gain important professional skills that can either get you hired or take your current work projects to the next level, well, then Next.js is a no-brainer. It encompasses some of the most important libraries and languages in the world for web and mobile development. It's used by companies from Apple, Walmart, Nike, Netflix, TikTok, Uber, Lyft, et cetera, et cetera, all the way at the very top to so many startups. And the reason why is not for nothing. It's because it's an exceptional tool that can streamline and create exceptional, exceptional quality applications. You can build pretty much anything, but how do you learn Next.js? Well, having a foundation in JavaScript, React, and key industry web development principles is the way to go. So this is why then this course matters. Because JavaScript and React, if you start using ChatGPT, AI, Google, Stack Exchange, well, that can take your entire life, years and years learning, albeit valuable things, but not what you need to get hired, not what you need to write quality programming in a practical way where you don't have years and years. And I'm happy to mentor along the way. I've worked as a senior front end for some amazing projects and teams over the years. And I'm excited to guide you through this official foundation tutorial code along. We're gonna code along, you're gonna code along with me. I'm gonna challenge you. I'm going to sharpen your skills through the official foundation tutorial till we get to a great place to be. So this course is tailored for all levels. You have examples and code alongs. But if you're more advanced, it doesn't mean you need to go through each video one at a time. Although we are building a final project together step by step, there will often be videos for beginner or intermediate levels where we cover fundamental principles. And those videos you don't need to go through because we're not advancing the project. So if you have enough understanding of JavaScript that you know how to write filter, how to write basic algorithms with filtering, mapping, you understand how to manipulate arrays and objects, then you do not need to, of course, go through the fundamentals of JavaScript. If you have knowledge in React fundamentals, then you do not need to go through any of the React videos and you can still code along step by step. You'll see the title of the video and then you can scan through if you feel like it and then make that decision. But for those of you who are completely new, completely new to web development, this course will cover the basics. Now we're staying practical in terms of our time efficiency. So if you are new and you want to get a job after going through this course, you're gonna have to practice on your own after and make sure you really understand, especially if you've never worked with libraries like React before. If you have, then maybe it'll come much faster for you. But if you haven't, it makes sense that you're gonna have to just train your memory muscles after you go through this until these concepts really become clear. But we're gonna navigate to the essentials because React is massive and JavaScript is even bigger and web development is even bigger than that. So we're gonna embark on a coding journey together and no matter what level you are, we're going to uncover, refresh you and challenge you, even if you're senior level. Because here's the thing, and by the way, you can see some Next.js code over here. We see a homepage and we see some rules for the properties, for our modules. And we're going to cover all of this from scratch. Because even if you are an experienced React developer, I see too many juniors want to learn, add Next.js as their framework for React because they see Nike and all these companies using it. They implement the framework correctly. They start their projects where they take on a template and they modify the template accordingly. However, after that, they don't actually use all of the wonderful things that come with Next.js on top of React, because it's not just about the defaults. You know, you do get excellent defaults when it comes to things such as routing, but you can get so much more deeper than that. Pre-rendering, for example, optimizations, learning how to customize GetStaticProps, GetStaticPath. If you don't know what that is, we're gonna go through it together. But this is inherent functionality in Next.js that's there for you in a way, makes it so much easier to deploy faster, more responsive, more efficient web application design that would take you much longer and get much more lost in the complexity with React. So data fetching, dynamic routing, API routing, properly handling metadata for your SEO, having control over SSR, static rendering, server-side rendering, pre-rendering. This is really where the power of Next.js stands. And if you have no idea what these concepts are, then that means you're very new to web development. And once you go through our beginner web development lessons, these seemingly more complex, but actually just essential pillars of development will become clear to you. But for the rest of you who do have that experience, who do understand the value of optimization and pre-rendering, you know, if you've built an express framework before, use Lambda functions through AWS, Next.js offers that seamless, pure functional way to write serverless request handling. And we're gonna look at that in this course. We're gonna go step by step. It's very cool. So that takes me to my last thought here, which is the reason why we learned Next.js and we implement Next.js into our React projects. It's not because Nike does it. We couldn't care less about what Nike does. Nike is Nike. We do it because it's going to give us a stronger development and production value, a more streamlined approach to handling rendering and handling optimizations. And that's what this course is about. And that's what you're gonna get out of this course, the full complete picture. At the end of this course, if you follow all the steps with me and you code along with me, you will get an elevated learning experience so that when you sit at that job interview, The interviewer says, hey, when should we be using client-side rendering? You're not going to make mistakes or not know what that means. You're not going to say, well, you can get client-side rendering when you pre-render the data ahead of a user's request. You're going to know by the end of this course that when you should be using client-side rendering is for user-specific pages where SEO is not relevant. Client-side rendering, so front-end rendering, is useful when you can pre-render data. When you need to fetch data at the time of the user's request, And it's useful for private pages where search engine optimization, that's what SEO is, isn't a concern. It's a technique that helps create more dynamic and interactive web experiences. If you have pages that are private and specific to an individual user, like what kind of page would that be? So if you have a personal profile page, right, on your web application, you don't need these pages to be visible in a search engine result because it's not relevant. But Next.js offers functionality such as the server-side render props. And the power of something like that means that you can pre-render a page, so you get the page rendered before the user even uses it. And the TTFB, that's time to first byte, is going to be slower than the getStaticProps because the server must compute the result. So you should use that getServerSideProps only if you need to pre-render a page where the data must be fetched at request time. If that sounds confusing to you, we will go through all of this together step-by-step. If these concepts are beyond anything you've done in web development, maybe you've only worked with WordPress, well, we're going to dive into the nitty gritty together. You're going to come out at the end of it, point it in the right direction, and all of this demystify it. So these initial videos are really to address both the beginners and the intermediate levels. And now that we've gone through the why, it's important to really master Next.js beyond just implementing it as a framework and going through web development principles and best practices. Let's first make sure we define what Next.js actually is. So we're going to do a few more slides and then we're going to define what everything is by programming together. So let's exercise a little bit more patience and whenever you're ready, I'll see you in the next lesson.