Introduction to Next.js Next.js Overview

Transcript from the "Next.js Overview" Lesson

[00:00:00]
>> What is Next.js? Well, I think in order to understand Next.js, you really gotta to understand some of its bigger dependencies. And the biggest one I would have to say is obviously gonna be React. So all of you might know React, but if you don't, I like to think of React as not a framework, it's actually more of a view library.

[00:00:17] If you think of React by itself, if you just npm install react, you can't really build a full, feature rich application with just React. You're gonna have to install a few more things, a router, you gotta figure out how to do styling. And we all know there's 1,000 ways to do CSS in React.

[00:00:37] You're gonna have to build a build system, unless you get a CLI or something like that, or some boilerplate. There's just a lot that you have to do, whether it's easy for you to do with the CLI, or you do manually, you still have to decide on what approach you're gonna do.

[00:00:51] So you still have to make a lot of decisions regardless of how easy those decisions are to implement. And that's kinda how React is. So Next.js is what I call a framework framework, or a app ready framework. Next.js is a full stack framework. As in, it not only lets you build front end applications, but it also helps you build out APIs, which is really interesting.

[00:01:17] And it uses React as its view library. So when you start actually putting stuff on the page, you'll be using React. And that's how Next basically uses React. So it's built on top of that. You'll see other frameworks use other libraries like Vue, there's some that use Angular and even Gatsby's another framework that's built on top of React.

[00:01:35] They all decided to do that because React is a really good framework. So it seems like a really good idea. But yeah, they're very similar. So that means all the stuff you know about React and all the knowledge that you've gained there, it's gonna transfer over to Next.js.

[00:01:50] So it's not like something completely new and you got to reset how you think. Nope, it's gonna be everything gonna be carried over. You're just gonna learn some new conventions and new opinions and stuff like that. So talking about those opinions, and that's basically what Next.js is. It's a whole bunch of opinions and conventions built on top of the React framework.

[00:02:12] And this team has a history of building tons of quality applications. The team at Vercel are the creators of Next.js, it used to be called Zeit. They're Vercel now. And they created this framework, and they basically just taken all their opinions, all the stuff the community's been doing for years and just decided that here's the way that we feel that everyone is gonna do it anyway.

[00:02:37] So we're gonna bake it into this thing, call it a framework, and just give it to you. And it actually just makes sense, because who wants to go set up server-side rendering and CSS modules every single time they make a React app? You probably don't, which is why you reach for some type of boilerplate or something like that, because you just don't want to do it.

[00:02:53] Well, this is the next level of that. You can think of this as boilerplate, automated or computed, so you can actually work with it and not boilerplate as in like, it's just React, but it's just a starter reference, but it's really nothing else other than just a starter.

[00:03:07] So pretty dope framework. So, here are some of the highlights that you get for free with Next.js. You get a developer build system, which I don't know, these days if people make build systems from scratch anymore. But, when I was learning to write code, I had to make a Webpack configs from scratch [LAUGH].

[00:03:26] It was crazy saying it, because I don't think anyone does that. They just don't make dev builds anymore, it's just free now. But yeah, they give you one that's very good and you almost never have to touch. You also get a production one, which is the same. You get pre rendering.

[00:03:40] So things like server side rendering, build time. And then also like static. And we'll talk a lot about those things if you don't know what I'm talking about there, we're definitely gonna get there. You get routing for free, so you don't have to figure out what router to install and how to use it and how to set it up.

[00:03:57] Because we all know the router ecosystem in React is all over the place right now. So you know what I'm talking about? And then API routes. Yeah, like I said, this is a full stack framework, so you can actually develop APIs in this framework. Which is very reminiscent of back in the day when Node first came out and everyone made single page apps with their Express app, and they did express.static, and they would just serve the index.html, and they would have their Angular app, the MEAN stack.

[00:04:26] And then we realized that that was a bad idea because we need CDNs. So it's like that, but they don't live together and you still have CDN and all this flexibility. So you get that same experience of having it colocated, but you get the really good experience of having everything performant, which we didn't have before.

[00:04:45] Unless you threw like Nginx in front of it and all this crazy stuff. But now, nope, we get all this stuff for free now. So really dope. Always hear, well, what about create-react-app? Doesn't create-react-app do a lot of this stuff? Absolutely, create-react-app does do a lot of this stuff and it also has a lot of opinions baked into it.

[00:05:06] But create-react-app is basically boilerplate, right? It doesn't add any new functionality to React. It basically just takes a build system, basically, the build system, it takes a build system and it says, here, you go. We gave you a really nice build system, which is actually really good. And we'll manage it for you.

[00:05:25] And then you can go ahead and build your app. And that's what you get for free. And then when you start making your app, it's just React. There are no conventions or anything that's baked into create-react-app when it comes to actually writing your application. So cuz it's just regular React at that point, you still have to figure out things like a router and stuff like that.

[00:05:42] There's still some decisions you have to make. So I would say it's probably the best boilerplate you can do. And even now sometimes, in some cases, I would recommend using create-react-app over Next.js. And you'll see in a minute where I think that's true. But no, it's not like Next.js, you don't get server side rendering and API routes and things like that.

[00:06:01] So it's not a complete framework, it's just really good conventions and opinions baked into a build system that you can actually eject and customize if you want to as well. And then you're not even inside create-react-app anymore at that point, you're just a React app. And then what about Gatsby?

[00:06:18] So I would say Gatsby is definitely more similar to Nest.js than create-react-app. They're very, Gatsby and Next.js app are actually very similar. I would say Gatsby has conventions built into it as well and even stronger conventions, specifically around how it wants to do data fetching. It has this thing called a content mesh, where you can pull in data from tons of sources and aggregate them to a single GraphQL schema, and then that way it's just unified and type checked and ready to go in your application.

[00:06:51] And that experience is really nice. But there's a lot of overhead there, you have to know GraphQL in order to use Gatsby or at least to get the best from it. You don't have to use GraphQL, you can definitely not use it. But then I think you kind of defeat the point of it using Gatsby in the first place.

[00:07:07] So there's a lot of stuff there. Also, Gatsby doesn't have the ability to create API routes and stuff like that. It's not a full stack framework, but it does offer a lot of the same stuff as Next.js, like client-side routing, static generation, things like that. And the tooling is really good too.

[00:07:24] So they're both very similar. And I would also say that Gatsby has better support when it comes to doing things statically, like sourcing content, like building documentation, stuff like that. But that also depends on how comfortable you are with GraphQL and things like that. But that's not to say that Next.js doesn't support that stuff, because it does.

[00:07:43] And their support is getting better. So it really just depends, and we'll talk about that. So yeah, when to use Next.js? So my general guide to when to use Next.js when making a React app. I'd like to just go through this little list of different things like that.

[00:08:02] One tip here though, is just never start a React app from scratch. There's just so much out there these days, I just don't understand why anyone would ever just make a React app from scratch. If you think your case is that specific and it's that unique that there's nothing out there that's gonna help you and you have to do it from scratch, you're lying to yourself, because that's just not true.

[00:08:23] Eventually you're just gonna converge, you're eventually just gonna go look at the source code for create-react-app and look at their Webpack config and you're gonna copy it. That's what you're gonna do, because [LAUGH] that's eventually where you're leading to. So learn from the people before you and use these conventions, just don't create from scratch.

[00:08:39] Okay, so do you only need a single page app, then use create-react-app. Single page app, as in, I'm only doing client side routing. I don't care about server side rendering. I don't care about API routes. This is a single page app, it's hidden behind a paywall, that's it, I would say yeah, you probably should just use create-react-app.

[00:08:56] Although Next.js and Gatsby will work for that as well. They're not built for that. And you have to turn off and opt out of a lot of things to be able to, for it to be a single page app, create-react-app is just a single page app. So just use that.

[00:09:10] Do you need a static site like a blog that's also a single page application? Use Next.js or Gatsby. And this is gonna come down to preference, how comfortable are you with GraphQL? Is there a specific plugin that one of these things has that you really have to take advantage of?

[00:09:24] You know, are you sourcing from a CMS or not? Does that CMS have support for this framework? Different things like that. I think that's what it's gonna come down to both of these work pretty well there. Do you need server side rendering and API and all the, above then yeah, you're gonna use Next.js.

[00:09:39] Because it's the only one that does that. So, yeah, those are my opinions on when to use this framework. And pretty much these days, I use Next.js for all my React stuff, except for when it comes to really heavy static sites, for now, I've been using Gatsby. But even Next.js is figuring out ways to improve, and they have a lot of stuff coming out.

[00:10:03] But I almost never use create-react-app, because I just don't build single page apps anymore. And, or I guess if I'm building a library, I'll just use a library starter. But that's not an app, so yeah.
>> Databases with Next.js?
>> All right, somebody asking that question knows Next.js.

[00:10:19] So yeah, we're gonna [LAUGH] get to that, and yes you can use databases with Next.js, because Next.js is a full stack framework. So, anything you can do server side, you can pretty much do with Next.js.
>> There's questions about the microservice versus monolith. Did you mention anything with that?

[00:10:40]
>> I didn't mention anything about microservices and monoliths, and I'm not sure if the question is geared towards like back end microservices and monoliths, or are we talking? I know what they're talking about, they're talking about, hey, normally, the convention has been, we'll have our repo over here for our single page app.

[00:10:57] We'll have our repo over here for our API. And that's kind of how we do it. But now it seems like Next.js is this huge monolith. In fact, kind of what we avoided. And that's kind of what I was hinting at. Actually it's not, right, the code lives together, absolutely.

[00:11:12] But depending on where you deploy this and how you deploy it, they are completely separated and handled very nicely through React. And that has a lot to do with the server-side rendering and how that works. And it also has to do with just how they built the framework and how it handles the APIs and stuff like that.

[00:11:32] So, basically, if you had a traditional monolith with Express, that's not a bad thing. The only problem with that is when you don't put a CDN in front of it and cache those static assets and be smart about it, Next.js does that for you. So things are always cached, things are always fast, things are always available.

[00:11:53] Things are always pre rendered. So you get the benefit of having that really nice static experience that you've been doing for years. But you also get that really good development experience of just having everything colocated. So you don't really give up anything by using something like Next.js. So it's a little different than what you would traditionally think of a monolith.

[00:12:11]
>> Authentication, are you gonna get into that?
>> I am not gonna get into authentication, because it's not specific to Next.js. The way you would handle authentication in Next.js is the same way you would handle it pretty much in any React or Node application. I could talk about where you might do it, but it doesn't change anything for this framework, it's not specific to it.

[00:12:32]
>> You're supposed to pitch your other course.
>> Yeah, so there's another [LAUGH] there's an advanced Next.js course where I'll dive a little deeper into some of those tactics.
>> Or your API design in Node kind of covers authentication as well.
>> Yeah, API design in Node does cover authentication.

[00:12:49] Yeah, I think I linked to that course somewhere in here, but not for authentication. But yeah, you can look at that course to figure out how you can do authentication in Node, and that carries over pretty well for Next.js.