Next.js App Structure

So open your next-app in VS code

Next.js file structure is slightly different from a react app. Let's take a closer look at all directories...

".next"

.next directory is the default build directory, now create-next-app is shipping.

"node_modules"

The node_modules directory is only for build tools. The package. JSON file in the app root defines what libraries will be installed into node_modules when you run npm install. The most common tools for managing and running these tasks are called grunt and gulp, which are installed through npm as well.

"Pages"

Pages is the most important directory in next.js. Basically, inside the pages directory in next.js have React Components. By default, next.js provides an index.js page in your next app and provides a custom app in next.js. Every page in next js with a specific route. You access a page with the file name. If you create an about a page in your app., create the file in the pages folder with about name of the file. After you access that page, help with the filename.

"public"

Generally, the public directory is used for all public assets you will use on your website. In react, the public directory has an index file, but in next.js we don't have any index file inside the public directory. Yes go guessed it right, it is because of server-side rendering.

"styles"

styles folder included all CSS files require in the project.