NextJS project structure - analyzing NextJS project structure
Now in this video we will go through the structure of the created project. After we created the project using npx create next app, lets open it in visual studio code, you can use any other IDE you prefer.
As we can see the project has three main folders. The pages, public and styles. The most important for us will be the pages folder. The styles folder as its name says holds the css styles. The Public folder contains static assets such as images, fonts, and other files that can be accessed by your pages. One difference that you may notice is that in standard react app in the public folder there is index js file, and here in the next project you do not have that. The reason is that next js has built in pre rendering and while it gives a single page application, that application is dynamically pre rendered when a request reaches the server so you do return initial page with content. The index js file in the public folder in react project is typically used as the entry point for the application and is used to render the application's root component in the browser.
As I mentioned the pages folder will be the most important for us, because there is where we set the file based routing. Therefore it is the folder where we define different pages that will make up our application.
Package json in a Next js project typically includes the following fields:
The name of the project.
The version of the project.
A brief description of the project.
A list of dependencies that the project relies on. These can include Next js and React, as well as other packages required by the project.
A list of dev dependencies that are only used for development purposes (for example testing frameworks, build tools).
A list of scripts that can be run using the npm run command. These can be used to automate tasks such as building, testing, and deploying the project.
The node modules directory contains all of the dependencies required by the project, including Next js, React, and any other packages listed in package json. These dependencies are installed automatically when you run the npm install command.
After we learned the structure of the initially created project in the next video we will do some hands on and start writing some code.
Hit the like and subscribe button if you liked my video, thanks for watching.
Смотрите видео NextJS project structure - analyzing NextJS project structure онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь ReactJS tutorials 21 Апрель 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 95 раз и оно понравилось 2 людям.