Introduction to Next.js 13+, v2 Creating a Next.js App

Transcript from the "Creating a Next.js App" Lesson

[00:00:00]
>> Okay, so let's get started, let's make a Next App. Enough talking, let's write some code. First thing I'm gonna do is actually, I'm gonna open up my other terminal. This terminal here is called Warp. It's actually really cool if you've never heard about it, but it's not really a good one for this type of stuff.

[00:00:17] So I'm just gonna open up the, what do I use other than this? I think I use iTerm. There we go, okay. Make this bigger. There we go. All right, so what we're gonna do is we're gonna use this tool called create-next-app. So create-next-app is the same thing as every create whatever app that's out there, it makes an app that's already got all the default stuff for you.

[00:00:45] In order to use Next.js 13, we had to add some of these tags like @latest, and then we have to pass this flag experimental-app. So I'm just gonna copy this. And I'm gonna go into my code directory here. And I'm just gonna say npx. And I'm just gonna say, create-next-app@latest --experimental-app.

[00:01:09] And it's gonna do that. And it's like, do you need to install these packages? Yes, I do, install those packages for me. Give it a name. In this course, I think we're gonna build kinda like a personal site page, resume looking, like your own personal dev site where you can show off your projects and stuff.

[00:01:33] So I'll just call this my-site. That's what we're gonna make. I'm gonna be using TypeScripts, so if you wanna follow along with me, use TypeScripts. Highly recommend ESLint, and let this thing install. Yeah, that's the easiest way to install Next.js. So take a minute to download. Well, actually, it's pretty fast.

[00:01:55] If you wanna do it manually, though, I did write down the manual instructions, which actually sometimes I do just do the manual instructions because it's just out of habit. I had just done it forever, so I usually just do it anyway. There's really only a few dependencies you have to install, which are gonna be these here.

[00:02:11] So you need to install next@latest react@latest react-dom@latest, and then this eslint-config-next@latest. Those are the only things you need to install yourself. And you just gotta do some setup in the package.json and the nextConfig. And I'm gonna walk you through those files so you can see what I'm talking about, but you just gotta set that stuff up.

[00:02:31] Cool, okay, so looks like I'm done here. I'm gonna go to my-site, and I'm going to open this thing up in VS Code. There we go. So let's just get a little tour of what we got here, cuz it's definitely different. So we get our standard every repo stuff, our git, it's already initialized.

[00:02:57] We got our git, ignore all that stuff. We got our tsconfig, which really isn't doing anything special. Nothing crazy here, but take a look at if you're interested. Let's take a look at the package.json, there's some really cool stuff happening here. So, first thing is look at the scripts.

[00:03:12] So, scripts here, we've got four different scripts. We have one called dev, that's pointing to something called next dev. This is in the next tool is like a CLI basically. So, it's basically depending on what you opt into, it's either using Webpack or it's using Rust. I think it's using Rust now for their new thing.

[00:03:33] So it's like the build system is obfuscated from you. You don't need to worry about it. And that's one of the things that we'll talk about. And if you use create-react-app, it's still using Webpack. And there's an eject command you can use where you gotta bring the Webpack out and do all this stuff.

[00:03:50] Like with Next.js, I don't think I've ever had to do that. I've never had to even worry about what the build system does cuz it just works, maybe once or twice ever. And I've built, I don't know, over a hundred Next.js apps so far, so I don't know.

[00:04:04] I don't think I've ever had that problem, cuz they just do such a good job of making sure I don't have to worry about it. It kinda gives you that feel. I don't know if you've ever developed in like iOS or anything in Xcode, or Android even, where you just like, you just go in and you just hit Build.

[00:04:17] And it just works and you don't have to configure the build too much, kinda feels like that. I mean, not quite, but it's the closest I've gotten to it for React app. So we got the next dev. That's what we're gonna run in development mode so we can start our server locally and get all the module reloading and all that cool stuff.

[00:04:34] Build is when you go to deploy. So you build things ahead of time. And that's because for a few reasons, right? Some pages might be static, some things have to be built ahead of time that we want to cache, so we build it. Some data might need to be fetched at build time like for a CMS, for a blog post, or something like that.

[00:04:52] You do build. Start is like after you build it, you would run start. So that's the actual server that's running. You will never run that locally. That's gonna be like some thing you deploy to that's gonna run that command. And then lint does exactly what you think it does, it lint.

[00:05:07] And then you can take a look at all the dependencies if you want, but like I said, the main ones are just next, react, react-dom, and everything else is just like extra stuff here. Yes.
>> Like the carts and horses, see there's no testing kind of solution inherent.

[00:05:25] Is that something that Next.js leaves to us? Is that something we'll cover later?
>> Yeah, I've thought about this a lot, and I've talked with the Next.js team. It's like the next step for them might be incorporating their own testing solutions so it feels like a really complete framework.

[00:05:40] But as it stands right now, no, they leave it to us, because it is no different from testing the Next.js framework than it is like a React thing or React App. So they were like, yeah, we'll just leave that, but I do think there's opportunity for them to.

[00:05:53] And now if you make a file or you put it in this folder, it will run it through this test for you. So I think that'd be really cool. Someone should add that, someone should fork next CLI and allow you to do that. So if you want a project to do that, I'll definitely tweet it out.

[00:06:08] But now, you test it the same way you test any React app, there's no difference. All right, let's take a look at a few things here. If we go to the nextConfig, couple of things. One, we create this object here that says experimental and then appDir true. So we have to opt in to the experimental app directory, cuz at the time of teaching this course, it is experimental.

[00:06:31] Although I did talk with the head of developer relations over there at Vercel, the company behind Next.js, and app directory is not going anywhere. It's finalized, it's done. Any change that might happen are gonna be background changes and nothing that we'll actually see. It''s just how they actually optimize things.

[00:06:49] So, although it is experimental right now, pretty safe to say this is gonna be the future of Next.is. So you guys are literally on the bleeding edge of Next.js right now. Very excited to be sharing that. Either I'm gonna have some good opinions in this course and the Internet's gonna be like, this is how you do Next.js, or people are like, what is this guy talking about?

[00:07:08] This is not how you do this, because I don't think anyone's teaching this stuff right now. So I'm super excited and kinda nervous at the same time. So we'll see. And this is just like a comment to help the TypeScript compiler know that there's a type in this JavaScript file since you can't use types in the JavaScript file.

[00:07:24] So that's just a hint for the compiler don't need to worry about it. And it's just changing the color cuz my theme picked it up. Otherwise it'll just not be a color. And then we have public, public is just a folder where you put public assets and they get served publicly.

[00:07:40] So fava con, images that you might want, those things just get served publicly. And then we're gonna talk about the pages and the apps. I'm just gonna briefly talk about them right now, but I'm not gonna go too in depth. So, let's think about it as app is where we're gonna put all of our pages, which sounds weird because there's a directory called Pages, but that was the old version of Next.

[00:08:04] You can still use the Pages directory and we'll talk about it more for in this course, we're going to be using the app directory for all of our pages. And in for this course, the Pages directory is mostly going to be used for back end API routes. So you might ask yourself, why is that?

[00:08:21] That sounds really weird. Well, it's because this is a fragment. This is an artifact leftover from the last version of Next where they didn't really know where to put the API folder once the app folder migration happened. Because it actually made sense when all your pages were in the Pages folder to have the API there, it actually worked out.

[00:08:39] But now all your pages are in the App folder, they didn't move the API folder over to the app folder. I think that would have been a lot of breaking changes maybe, or maybe they're trying to figure out maybe we should just make a top level API folder.

[00:08:49] So they're still creating an RFC for that on what to do. So that's why we still have the Pages folder with only the API in it. Because that's just what's left over. It hasn't been migrated yet. It hasn't been moved. And it's not so high much of a priority for them right now, as they're really working with the React team to solidify some of these newer updates to React 18 and things like that.

[00:09:10] But yeah, don't get confused by that. It's really confusing, sorry. Any questions? Yes.
>> So where would the underscore dot app dot TSX and underscore document dot TSX files, would that exists in the App directory then as well?
>> Good question. So he's asking about previous versions of Next.js, you would have an app.tsx file or a document.tsx file where you can, it's basically the root of your application.

[00:09:38] Okay, we don't have those anymore. They're gone. We don't have underscore app, we have underscore document, but we do have something that kinda replaces it and we'll talk about it. And yes, it goes in the app directory, yes. What font and theme are you using? Man, that's a good question.

[00:09:54] How do I see this?
>> That's One Dark Pro.
>> It always comes up.
>> I don't know, they asked me on Twitter today and I felt so bad cuz I don't know.
>> That's One Dark Pro for sure, I love the theme.
>> One Dark Pro, darker, and then my font is Fira Mono, yes.

[00:10:07]
>> So I have a question about the fact that the API is included. How does this impact the ideas of serverless or microservices, if people wanna build that type of architecture?
>> Yeah, so, although the API is included here in this repo, it's actually deployed separately. So, when you deploy this, each one of these files here is gonna be their own service function, separate from whatever React you wrote.

[00:10:40] It doesn't even know about the React. They're not bundled together. They know nothing about each other. This is just sugar syntax for us developers to co-locate our code, and not so much affect functionality, yeah. And that's really what this framework is about. It's just like the company behind this framework is really insane about developer experience.

[00:11:05] That's all they think about. So that's really what this framework is about. It's like how do we create something that's fun for developers to use? And because of that there's always gonna be something that feels like magic. Kinda like when Rails first came out and it was like, damn, that thing just generated everything, that's crazy.

[00:11:20] And it felt magical. Or when Angular came out, and everyone was doing scope dot this, scope dot that, and everything was just changing, and it felt crazy. Okay, it's like that, but just on the framework level, yeah. Yes.
>> So this is, it looks like Express?
>> Yeah, it does look like Express.

[00:11:45] That's a good question. So that's because for the most part most platforms that support service functions in JavaScript, their runtime is heavily based off of Express, so, which is heavily based off of the native HTTP module in node. So if you go to AWS, if you go to Google Cloud anywhere that supports a JavaScript service function, it's just a function that takes a request and sends back a response.

[00:12:12] And that's it. So fortunately, if you've ever used Express, this is gonna fit right in for you. Because yeah, it is. There are some differences and nuances, but it's 90% the same. Okay, let's start it. So if you go into terminal, npm, run, dev, you should get this, should be on 3000.

[00:12:36] Or if you already have 3000 using it'll go to like 3001 or until it finds the next one. So I was gonna go there. And actually, I've never seen this new one. This is sick. I was always seeing the old one, this is my first time seeing this one.

[00:12:48] This is kinda cool. I really like the design of this company. Yeah, so they give you this really cool landing page here that you can check out and whatnot. And if we want, we can go back and look at the code, but I don't think it's too important to get too caught up on the code.

[00:13:03] But we can take a look at it. That code for that page is gonna be an app page dot TSX, get this out there. And you can see it's once you get to this component, it's just React. It's nothing crazy going on here and this component, it's just React, right?

[00:13:20] It's not doing anything If you haven't seen before, it's literally just React. Next.js doesn't really influence too much about how you write your JSX. It just leaves that to React. It just kinda helps you with everything up to that point. How do you get the routes and things like that?

[00:13:39] So once you start writing JSX, it's just React. So not to worry about that too much. But yeah here's the files for that, they got some CSS. I'm not gonna talk about this stuff right here, the header, the layout. We'll get there. If you got questions, save them for later cuz I promise I will be talking about those.

[00:13:56] But yeah, that's how you start a Next.js ap.