From the course: The Freelance Stack: Real Project with Next.js and Strapi

Why are we using Next.js? - Next.js Tutorial

From the course: The Freelance Stack: Real Project with Next.js and Strapi

Start my 1-month free trial Buy for my team

Why are we using Next.js?

“

Welcome to the Next.js crash course, where we're going to go through all the different questions, all the different things you need to know in order for us to build the main project of the course. And the very first question that we're obviously going to have is why do we use Next.js? If you haven't used it before, you might be completely clueless as to what kind of framework it actually is. But if you have React experience, I promise you, your learning curve will be quite smooth. You will be getting started with Next.js in no time, because it is a meta framework that just sits on top of React. And what it tries to do is sort of get rid of the disadvantages that React.js has, right? React is a completely client-side framework, while Next.js is going to be server-side first and trying to combine the best of both worlds. And we'll learn in the next, you know, the next few videos or the next few sections, all about that, how it does it and how you can use, how you can use it to the full power. Now let's first look at what the disadvantages of React.js actually are before we can go into how Next.js fixes them. And the very first thing is that React is, like I said, a client-side library, meaning what happens under the hood is when you open a React.js website you get a big JavaScript bundle sent to you that will then be rendered within your browser. So we're basically just sending JavaScript and from that JavaScript your browser is going to figure out how the website should actually look like. Now that is not just a disadvantage, it actually also has its advantages. For some years, everybody was suddenly going to say, everybody was suddenly really excited about building everything client-side. And the reason for that is because as a single page application, as soon as that JavaScript bundle is loaded, you will have a very smooth website experience. Every time you click on a page within your website, you're going to go there immediately. There's no more waiting, there's no request to a server or anything like that which is the big advantage of react but there's also the downside which is if you have to send that big javascript bundle at the beginning that first load time will be a bit slower and on top of that if you let javascript build the website in the browser you're going to have problems with search engine or with search engine crawlers rather because what they do is they just send a request to the server and then when they receive javascript back they're not going to build the website. They want to figure out what kind of content is on your website, right? So for search engine optimization, React actually had quite a bit of trouble, or if you were building a website with React.js, you would have quite a bit of trouble making it rank highly on Google because Google wouldn't fully understand what your website is about without being able to pull its content in. Now this is obviously one of the key reasons as well, but I would say Next.js is especially important for freelancers to learn because what I had often be the case is that a lot of my clients rely on being ranked quite highly and when it comes to when it comes to search engines and on the other hand if you develop in a very large company you know you might be working on internal tooling or you might be working on on things that are not necessarily needing to rank high on Google. On the other hand if you're working for mid-sized companies and you're building the only website it's very important for them to be ranking highly in Google and for that Google has to understand what's on the website and that will be so much easier with Next.js and we're going to see exactly how that works as well right so Next.js gives you two main benefits which are the server-side rendering which will make it easier for your for your search engine optimization and on the other hand also performance improvements because it sends a lot smaller JavaScript bundles. And so those two things, those two improvements, don't actually come with disadvantages because we're still going to make it that your users will still have the same feeling of like this smooth single page application. And the way we're going to do that is by pre-rendering the pages that are necessary and then hydrating with a smaller JavaScript bundle. We're going to see exactly how that works during the crash course. Otherwise, we also have actually with Next.js a full stack framework, meaning we have integrated API routes. You can literally write your backend within your frontend folders as well, if you want to do that. Some people prefer to have it modularized. And you can also see that it's a good bet on the future when you see it, like how popular it's growing over the years right from like less than 20 like less than 10 000 stars here 2017 went out over i think 130 000 github stars or 120 120 000 and now besides the general information on like why use next uh besides the general information here around uh the advantages of next.js over react in the freelance stack besides what I already mentioned. The way we're going to use it here is when we work with another content management system, like in our case we're going to work with Strapi, it's easy for us to revalidate the data coming from that back end and just display it on the front end. So as you've already seen in the freelance stack video, we're going to be pulling in data from Strapi and continuously using it on our website and Next.js will automatically revalidate that data, display it on the page, pre-render it, so that on the one hand your users will have a great experience because the website will be fast, will be continuously updated, and on the other hand your client will have a good time by just being able to import or update any of the data they want within Strapi.

Contents