Project Structure & Config

[00:00:00]
>> Scott Moss: Okay, in this lesson, we're just gonna talk about structure. Just like, how do you organize this thing? What are the opinions that NextJS enforces versus the opinions that they don't care about? Because it is heavily opinionated and it uses the file system for those opinions. Different file names, different characters inside the file names to determine different features and functionality.

[00:00:26]
So, which one of those are specific to NextJS and which one of those are just my own thing and why I do those things? So that's mostly what this is gonna be about. So let's talk about some of that stuff. So since next JS13, with the app router, you now have this app directory, that's why it's called the App router.

[00:00:42]
Because before next JS13, you had a Pages directory, and that's where all your routes went. Same concept, way different syntax, way different features. They still support it, as you saw when I did the CLI scaffoldings. Do you want the app router? Because if you say no, you'll get Pages.

[00:00:58]
Don't do pages, it's not It. It's easier, don't get me wrong, I think there's less to think about. But with it being less to think about comes less flexibility, less power. You're not taking advantage of some of the newer stuff that a lot of platforms like Vercel offer, so always use the App directory if you're starting from scratch.

[00:01:20]
As far as what NextJS enforces with these directories, it really only touches three of them. So the App directory, there's a public directory where you can put any asset that you want to be exposed on the Internet, so images, things like that, files, whatever you want to be exposed.

[00:01:37]
And then the API directory, that's it. That's the only directories that it pays special attention to. Everything else you can do whatever the hell you want. And then within those directories, it's only specific file names that have special attention, and we'll talk about a lot of those, but so kind of starts with that.

[00:01:56]
So let's talk about the App directory. This is the main directory for your application using the App router. The way that it works is every time NextJS sees something called. And I'm just going over it very lightly now, because we're gonna dive into it in more detail, I just wanna just talk, give you like a preamble.

[00:02:12]
But these are the specific file names or some of them, which is actually a lot more. It's just every time I look at the docs I'm, yeah, there's another thing for that. Nobody uses that though. So the main one is Page, so if you have a file called Page, that's gonna be a route.

[00:02:27]
So if you ever use a routing library, like React router, or something like that, and you have to mainly set those routes up in a component, you don't have to do that. NextJS has its own router that you don't touch, although you can if you want to, but you should probably never do it, otherwise don't use NextJS.

[00:02:43]
You just need to make a page inside of a directory inside the app folder and that's gonna be configured for you. Layout Pretty similar, It's a layout for a route. So what is a layout? It's just a piece of UI that wraps a page and it never changes, that's essentially a layout.

[00:03:00]
We'll talk about that as well. And then you have all these auxiliary ones, like a loading file. This is a page that will show when a page is loading while it's fetching data, show this page until that data is fetched. So it's like a loading screen essentially. Same thing with error, if that page threw an error for some reason, you can show this error screen.

[00:03:24]
And then they have tons of other ones for like not found, they have some new ones in preview for authentication related things like 404, 401, all this different stuff, so you can show pages for that. So there's just a lot, there's like a template, we'll talk about that.

[00:03:41]
But these are like the main ones, the ones that we'll mostly be using today. Mostly just page and layout loading sometimes. The API directory is for creating API endpoints, and it's pretty simple. Any file and error that ends that starts with or is called route, so in this case Route dot ts.

[00:03:58]
That's gonna be an API route. NextJS uses serverless functions, so each route is a function that will be called and we'll talk more about the routes and how you can expose different methods within those routes. But just if you don't know what serverless functions are or lambdas, definitely look into that a little more.

[00:04:17]
We'll definitely talk about it in the case of how and how it relates to NextJS, but these are just like service routes, so you can make API routes. What's interesting is that we don't really even need these anymore when building an application. With NextJS, I think even in this course I'm only gonna show routes for the case of like an external developer API, but internally, our app's never even gonna use the route, which sounds crazy, I know.

[00:04:44]
Everybody's like, TRPC, no, I don't use it, I don't need it. I don't need to make a route, and you'll see why, it's pretty cool. And then public static assets, images, fonts, things like that, files served by your app you can put there. Then here are just some common patterns.

[00:05:02]
So for me, you might see me do things like put stuff inside a components directory or UI directory. We'll talk about route groups and things like that, and then other common patterns that you see people do, none of this stuff is wrong. These are just what people might do.

[00:05:22]
This one actually is specific to NextJS, but we'll talk about route groups in a minute. Just putting this here so you kind of get a vibe for it, but we're going into detail about all this stuff, so don't worry about it. You don't need to remember, I just wanted to put it somewhere.

[00:05:35]
And yeah, that's pretty much as far as folder structure, TLDR. Follow these three things, mostly app and API, everything else, do whatever the hell you want. But this is how I do it.