Introduction to Next.js

[00:00:00]
>> Brian Holt: We did it, we built a RSC app without any help from any framework cuz we don't need no framework. And I hope you can see, you could just build this out entirely into an entire app. I've given you all of the interreact workings that you could build your own framework around this.

[00:00:19]
I'm hoping you're seeing it's just not really desirable to do. [LAUGH] You could, just maybe don't, maybe something like Next. So that's what we're about to do, we're about to just move into Next. Cuz we don't need no framework, but we kinda like to have one, so we're gonna do that.

[00:00:36]
Some of these notes are genuinely funny as well, I was sending him to Sarah and the one that killed her was more used effects, that should fix it. [LAUGH] Hot tip, it will not fix it. Tabs or spaces, I don't care, that was pretty funny too. This is my favorite, who needs comments when you have regrets?

[00:00:59]
[LAUGH] Cool, so yeah, again, this is all coming from SQLite, from the server, which is pretty cool. And then this is a client component where it's interactive on the client, so you get kinda both sides of that, which is really cool. Okay, so we just finished on the site here.

[00:01:24]
This one, RSCs without a framework, and we're about to do RSCs with Next.js, so that's what we're gonna hop into.
>> Student: I just wanted to ask, are there professional developers using the same tools that we used? Or are they using different build instruments and other pieces instead of Webpack or using other things, or is this all the same?

[00:01:45]
>> Brian Holt: All the same stuff, yeah, plenty of people still ship Webpack. There's no problem shipping Webpack, people still ship Browserify, believe it or not. And again, if you don't know what Browserify is, then you probably have less gray in your hair than I do. That's an interesting project, so they just called it done, right?

[00:02:04]
They're not building anything more cuz they don't think it needs anymore, and to be fair, it probably doesn't. Most devs probably use Vite these days, lots of them use Parcel, that works as well. But yeah, many large, large, large corporations still ship Webpack, and Turbopack is kinda the new hotness.

[00:02:25]
In fact, you are about to use Turbopack, if I'm not mistaken, cuz that's what's built into Next. So RSCs with Next.js, this is not a Next course. I just wanna underscore that fact, we are using Next in an instrument to teach you React.js. There is a perfectly great next teacher, my good friend Scott Moss, I liked him so much I moved close to him in Sacramento.

[00:02:51]
He's only lives about 30, 40 minutes from me now. So that's your destination, if you're like, I like next, I wanna ship stuff with Next. It's probably even the next stop on your pathway here, after you take this course, taking Scott's would be great. So I'm going to work basically around Next, I will try and explain to you as much Next as you need to know.

[00:03:11]
But I'm not gonna teach you all of the patterns or anything like that. I'm gonna leave that to the next course that you teach or that you take. Yeah, I'm not gonna teach you how to write great Next code. What I'm gonna teach is how Next enables you to write really cool React.

[00:03:30]
So just mild history for the kids in the back is that we had React for a very long time. And there was no full stack React frameworks, didn't exist for a very long time. And Next kinda came around, and I mean, I'm sure we could probably point to other ones, but generally speaking, you kept kind of your server and your front-end separate.

[00:03:56]
And we had things like Meteor, that was kinda one of the more first full Stacky sales, Js is another one. But Next is really the one, we're gonna take React and move a lot more of that workload back onto the server. So it's built by the fine folks of Vercel, lots of my good friends.

[00:04:13]
I used to talk at the same conferences Guillermo, who's the CEO, very nice person. So much of the core React team left Facebook and went to Vercel. So I would qualify the React project much more as a collaboration now between Vercel and Facebook. There's outside contribution, it's open source and open contribution, but the lion share of work is done by those two companies.

[00:04:41]
So plenty of them still exist at Facebook, yeah, there are both companies now. What else do I wanna say about this? It's gone through several iterations, but this latest one is where it really went full in on, we're gonna be in React server component first framework. And I explained a little bit at the beginning, but it's been controversial for probably reasons that you just experienced, where you have to opt in to using server components or, sorry, opt out of them.

[00:05:14]
They're there by default, you have to opt into client components. So this is trade offs, right? It's really cool, but it fundamentally alters the way that you write React, and it's not for every app. I feel very confident in saying that, don't use Next for everything that you use React for.

[00:05:31]
It's okay to use React without Next, I'm gonna say it's even encouraged frequently. I still write a lot of ten stack start and other stuff like that, or just straight up just V stuff. But there's lots of stuff that Next is also very, very good for. So just make sure you have all of your tools in your toolbox and you're selecting the one that works best for whatever problem you're trying to solve.

[00:05:58]
So you can use Next in kinda one of two ways, in my opinion. One is, it owns everything, which is kinda what we're gonna be doing here today, where it's your back-end, your middle-end, your front-end. It's the whole world, everything exists almost like rails, it's your monolith, right?

[00:06:17]
If you're at a bigger company where it doesn't make sense to do a giant Next monolith. You can do, I don't know if this is technically correct, but I've heard people call it this, so I'm gonna keep calling it that, a middle-end server. So let's just talk about the Netflix architecture, cuz I worked on that, right?

[00:06:37]
There's a bunch of Java microservices, they all then get coalesced into one front-end server that then serves all of the requests, right? I would call that a middle-end. The Node.js server wasn't really reaching out, iIt wasn't really a back-end, right? Wasn't calling the database, wasn't doing that, it was calling other services, then packaging those requests, and then responding to the user.

[00:06:58]
I would call that the middle-end, and it's not really your back-end, it's not really your front-end.