Intro to Next.js | Lesson 3: Project Structure

Transcript

English (Auto-generated)

talk about the project we've created in the last video, um, the structure of this project. So the first thing we can see is when we start looking at the project, before you see the the folder name, which is the next step we've created. When I go inside, I can see a few more things like the node modules, The pages, the public styles. These are the main folders and there are some files. Absolutely. The files are also important. Okay. They get ignored. File is is not very important, but if you're working on guitar, Absolutely, you would love to see that. I mean, if you're uploading your content to get hub, then you need to know what you're ignoring from the the whole whole project anyway. Okay. So let's start with the first folder, which is the node modules. So in the node modules we get the modules, we need to run up and running the next Js application, for example, the types, you know, the, you know, different things big. J S I don't know what it does in our case, but anyway, um if I go down, you should see a few things which you you should know about. For example, the next Okay, this is the module which actually runs the whole package, the note, the next year's application, the core, that of the next days. Similarly, if I go down, there is a react react, react checks and stuff and then rejects, you know, Reggie rejects if you want to use it and then things like that. I mean the node modules, folder. The second thing is the pages okay, what we get in the pages is actually we get the pages has two things first or the Absolutely pages actually three things. The first is the pages like, you know, index dot Js page, you can write any other page like, you know, um index dot Js. So you can create a new page by writing about or by writing contact, contact dot Js. So uh the, the pages are actually the roads in the next days, you do not need to create the route separately in a file or using the library. You just need to write a new folder and the folder name can be anything like, you know, page dot Js, index dot Js. You can see that it is here the about Js or whatever. Okay. The second thing is the uh the, you know, underscore dot Js. This is the, this is very bootstrap the whole application. So it actually runs the application, you can see that the global style dot CSS is imploding is imported here and then the function which is uh, you know, running the my app, the whole application is being run by this file and then the A P I, what is the A P I as we know that next days is the, is not only the front end language and it's also the backend language. This is the edge it has over the react so to do backend things, the api creation and everything you do inside the api folder okay. You cannot change the folder name. You cannot put the uh the general pages, the routes, the the general route pages inside the the api folder because it will ultimately make it the A P I the back end of the application. So in the back end you you can see that you actually, you know, handles the requests and responses and here you do whatever the programming you need to receive the re quince the request and send the response. So this is it okay that after the pages there is a public folder. I mean previously in the in the react, what do we have in the public folder is the, is the data, we want to show the public things like that. Maybe pages and many other things. But in the next Js in the public folder you put the images of any kind like you know the these are the the Svg I can the the baby con or any picture you had, you would be adding in the public folder. Then you get these tiles folder in these tiles folder. Absolutely. You know these tiles, this one is the one which applies globally this one applies the uh in the different modules which are, which I'm calling the pages here are actually not me but the next year's calling his pages. If I go there, you can see that this one this tile is being imported here, you can see that. Okay then. This is the simple, the Jason file to, you know, for the es land then the next configuration file. This is an important file for the next days. You do not use it a lot but for example you wanted to find the base ural, you want to define the environment variables, things like that. You use the next dot conflict dot Js file for such things to define the environment variables and professionalism like that. Okay. The package dot jayson in the package log when we talk about the package dot jayson so whatever we put inside this inside this application, actually we do not put it but the next Js while creating the while running the command in the command line in the PX create next step. These are the things we get, for example, the name of the application, the scripts we got. I mean these are the scripts, the next uh the dev the build. So actually the scripts is something like, you know when you run the dev you're gonna you are actually going to run the next dev when you're gonna run the build, you run the next build. When you're gonna run the start, you're gonna run the next start and then when you're gonna run the link, you're on the next link. Okay. The dependencies, for example the next and the version here is also mentioned, there is a possibility that when you deploy the next day's application you might get the changed version, but absolutely. The method should be similar to this one and some decorative dependencies. Okay? There is a read me file which you can create if you want to. There is, you know, just a common read me file in the package dot lot package package dot lock dot Jason is not important. File it just, you know, it just, you know, expands your package, Jason file anyway. We're not gonna do anything with this file but maybe at some some point we're going to do something with the package adjacent later in our further casts. Okay, so this is the file, the file structure in the next video. We're absolutely gonna talk something more until then stay tuned.
109 Views 0 Likes 0 Comments

In this cast, we will discuss the project structure of a basic NextJs Project

Comment
Leave a comment (supports markdown format)