Introduction

[00:00:00]
>> Brian Holt: Hello, welcome to Build a Full Stack Next.js App, the fourth revision. My name is Brian Holt, and I'm really excited to be here with you all, all of you in studio, all of you online, and all of you watching afterwards. Today, we're going to learn how to build a full stack Next.js app, and I kind of took the, now that I work in the enterprise, kind of an enterprise-like skew on this. So, this is the course website, fullstack-v4.holt.courses.

[00:00:34]
You can see I have two computers up here. The only thing on this computer is literally my course notes. So if you're following along here and you get lost or you want to go review something that I've done, that's what this is for. That's why I open source all these. Feel free to share these notes with people. That's why Frontend Masters lets me open source these, is because we're building on open source technologies, it makes sense that we have open source content as well, right?

[00:01:00]
So, let's pop into the intro here. I just want to show you up here at the top. You can see if you get lost, if you're watching the videos, this is the section I'm in, and this is the lesson I'm in. So if you're following along, you can always kind of refer to that to figure out where I am in my course notes. So one note, this is not, you don't need to take V1, 2, and 3 before you get here, this is just the fourth iteration of it.

[00:01:29]
This is the first iteration that I have taught. I just want to shout out my really good friend who also lives in Sacramento, Scott Moss, who did teach V1 through V3. His version's quite a bit different than mine. I'll just put it up here. So feel free to check his out as well. His has a lot more like AI code gen and like how to write this with Cursor or something like that. I took a different kind of spin on this, but equally valid.

[00:02:03]
So yeah, that is where V3 is. Cool. So, who is this course for? I hope it's for you. I try to make this as generally applicable as possible, but I do have some kind of assumed knowledge, so I just want to kind of go through this. So this is meant to be kind of like the fourth-ish course that you would take on the Frontend Masters learning path. So I'm going to assume that you have some skill in JavaScript, that this is not your first JavaScript course.

[00:02:30]
If not, there's a beginner's path for Frontend Masters, that's great. I'm assuming that you have some skill in React. If not, I know this other handsome gentleman that taught a great course on React, which is me. So, go take this one first, this would be a really good place to start if this is going to be your first React course, and I would assume some skill in Next. This shouldn't probably be your first Next course, and again, I have the Intermediate React, which is all taught through the lens of Next, so that's a good place to get started.

[00:03:04]
And there's also, again, from Scott, the Next.js Fundamentals, right, which will kind of get you to that area. So if you've gotten through Next.js Fundamentals, or probably even through Intermediate React, this should all be pretty accessible to you. So, why do I say all that? I'm not actually going to teach you fundamentals of Next. I'm going to kind of teach you like I know Next, now what do I do with Next.

[00:03:28]
This is going to be basically how I would construct a new kind of startup, that's kind of the lens I took here. But you don't need to be an AI expert, Node.js, Linux, those are all kind of things like there are courses on Frontend Masters that teach you those kind of things. You should definitely learn about those things, but I will generally kind of explain those things as we go. We're just going to be focused on building.

[00:03:55]
I took a pretty opinionated stab at the stack here. So we're going to be using Neon, which makes sense. I work there. We're going to be using Vercel, we're going to be using Upstash and some of these other companies, as well as like GitHub, we'll use GitHub quite a bit here. This is just one version of this stack that could exist, and I had to pick a lane somewhere, right, we're not going to deploy to multiple targets.

[00:04:17]
So, all this to say is like if you have a preferred stack here, you can definitely work with those as well. Why am I teaching this course? I use Next a lot in my day job. So Vercel is one of Neon's closest partners, and so I ship a lot of things to Vercel. I ship a lot of things obviously on Neon. All of my course websites, since January 2022 have been built on Next, including this one, this is the Next app, you can actually use Next to generate static apps.

[00:04:48]
Previous version of that was built on Gatsby, that's a fun fact, and I started that project in 2018 and I realized that that is the longest piece of software I've ever maintained is this course starter kit, which is kind of interesting. Yeah, Vercel is one of Neon's closest partners, and Next is kind of their framework that they ship themselves. The reason that I chose Vercel for this particular course is that Next just works really well for Vercel, like they kind of built it to be that way.

[00:05:17]
You can argue if you like that or not, but that's what they did. I like it because it is very productive. Like there's some things that I wouldn't necessarily have done the same ways that they have done it with Next, and we'll, I'm sure we'll talk about all of my opinions about the React ecosystem as we go. But all this to say, no matter what you feel about this, it's a pretty productive system to work in, if you know it really well.

[00:05:43]
It's amazing what we would call a meta framework, because in theory, React is the framework and so it's this framework around the framework, and there's several kind of meta frameworks, I would call like Remix or TanStack or one of those, those are all, TanStack Start that is, meta frameworks. And in particular, if you like React Server Components, you are in the right place, because we're going to be using them everywhere, it's kind of assumed in Next.js.

[00:06:13]
If you don't like React Server Components, well, you're going to have a bad time. I don't know what to tell you. Yeah, I mean, it comes down to this, like I like React, I like Node, I like shipping, and Next is kind of the nexus of all those things kind of put together. Just, I wanted to put a note here about the other React meta frameworks, which is mostly I'm talking about Remix and TanStack Start.

[00:06:39]
I really like in particular TanStack Start. So if you haven't tried TanStack Start, like, go take a look at it, they're in release candidate now, so probably by the time this is released as an edited course, it's probably going to be released. You can see I like it enough that down here, I got Neon to sponsor Tanner. So, it's a really cool framework if you want to go the way of like not using React Server Components and a bit more, less batteries included, less opinionated, TanStack Start is actually a much better fit for kind of that ethos.

[00:07:17]
I like both. I like Next because sometimes I like just getting in there and just getting stuff done and sometimes with TanStack, I want to write a more API-oriented, more, less React Server Component-oriented app, that's going to be perfect for TanStack. And then I just, you know, shout out to like SvelteKit, Solid Start, Nuxt, any one of them. They're all really cool. All right. So who am I? I'm this guy.

[00:07:45]
So I'm at Databricks now. I feel like I have a new company every single time that I'm here, which is actually probably pretty close to the truth. To be fair, it is the same company that I was at previously, my company just got acquired by Databricks. I was at Neon for quite a while and then Databricks acquired them, so I've been there for a while, very fun place to work. I get to work on agentic infrastructure, so every time that you deploy something to like Replit or v0 or something like that, and it uses a database, that's using Neon, that's the part of Neon that I get to work on, which is really cool.

[00:08:22]
As well as a myriad of other things. And prior to Neon, I was a PM, VP, DevRel, or engineer at Snowflake, Stripe, Microsoft, LinkedIn, Netflix, Reddit. A couple other ones as well. So I've kind of, I've been all over the industry, I've done a bunch of stuff, and I kind of landed in this developer infrastructure kind of place. So that's what I do. I product manage now developer infrastructure and developer experience kind of things, which I think makes me a pretty good fit to teach something like this, because that's kind of what this is.

[00:09:01]
I live in Sacramento these days with my wife and two kids, and everyone's favorite pup, Luna. And yeah, you know, enjoy playing games poorly or coffee, IPAs, struggling to hit a ball on the fairway. Yeah, and just trying to be a good dad. That's kind of my hobbies these days. Feel free to catch up with me. I left the socials here. I'm awful responding to DMs. So just be aware of that. Let's talk just a second about issues.

[00:09:35]
Inevitably there's going to be misspellings or I saw a broken link this morning. All this is open source, right? So you can actually come here, it's just build a full stack Next.js app, feel free to open pull requests or issues here. Either one is great for me. I'm always happy to chat on social media, but I will frequently redirect you to the GitHub just so that if you have an issue, many people typically have that issue.

[00:10:04]
So it'd be good to solve it once and then make it available for everybody. So there are two repos for this class. There's the website that you're on, which is this one, the one that I showed you, and there's this one, the example project, which is called Full Stack Next Wiki. We're going to make a little wiki app. And just to kind of give you a lay of the land here, which I wrote down here in the readme.

[00:10:29]
This works like all of my other classes, if you've taken them before, that I have steps, right? So this will be after everything that we've done, step 0, this is the complete version of the app here. And then we'll do a little bit more coding, and then eventually we'll arrive to another checkpoint, that'll be 001, and then eventually we'll finish down here with 09. So we're going to be kind of doing a hybrid, but we'll start the entire app together, we'll do a bit of styling, and then 02 here, I just finished the rest of the UI for you, because I didn't want to spend a bunch of time building React apps when the point of this is Next, right?

[00:11:12]
We're trying to learn about Next and what to do with Next, not how to ship screens. So that's what 02 is here, and I kind of did the same thing again with 09 where I shipped a bunch of tests for you, because I didn't want to spend a bunch of time writing tests with you guys. Otherwise, everything here will be all artisan, handcrafted, not written by AI with you and me. So, my suggestion here is that you go ahead and clone this Full Stack Next Wiki app, just so you have it here, if you get stuck or if you just want to move on, feel free to just copy and paste the entire repo so you can get kind of a complete individual working version of that.

[00:00:00]
Cool. So go ahead and please star the repo. It helps my fragile ego. And let's go ahead and get started.