I have created many projects using the new Next.js app directory. In this post, I like to share my knowledge of what are the usage of the files and folders in a default new Next.js project.

In this example, I am using the following selection to start a new Next.js project with the folder name "nextjs-14-starter-kit-v1"

APIcrud@laptop % npx create-next-app nextjs-14-starter-kit-v1
✔ Would you like to use TypeScript? … No
✔ Would you like to use ESLint? … No
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

Default Files and Folders

A new Next.js project comes with a set of key top-level files that serve important purposes in terms of configuration, handling scripts, and managing the environment

app folder

With the app directory, the routes are determined by the directory names instead. So if you have a folder "blog" inside the app directory, you can browse to the webpage via www.yourwebsite.com/blog. Inside each folder/route, you will typically have

• layout.js

  The layout file serves the purpose of defining a unified layout that is shared across multiple routes or segments that fall under it. Nevertheless, it is also possible to nest layouts within directories in order to have different routes, allowing pages to employ various layouts. I will share more on nested layout in my future tutorials. This file is mandatory in the app folder root directory.

• page.js

  The page file is where we specify the content and layout of the page that the user will view and interact with.

• global.css

  Traditional CSS file to apply styling to the entire app.

node_modules folder

The node_modules folder is a folder that is created when you install packages using the Node Package Manager (npm) or Yarn. You don't need to edit anything in this folder.

public folder

Next.js has the capability to host static resources such as images within the top-level public directory. These files can be easily accessed from the root of the application in a manner similar to pages. The public directory serves a practical purpose not only for images, but also for files like robots.txt, Google Site Verification, and other static assets.

jsconfig.json file

Configuration files for JavaScript, useful if you want to set shortcut paths.

next.config.js file

Configuration file for Next.js. You can use this file to set up other optimizations such as adding custom webpack configurations, rewrites, redirects etc.

package.json file

Lists of project dependencies and scripts for app.

postcss.config.js file

File is used to configure PostCSS for Tailwindcss.

tailwind.config.js file

Customize Tailwind CSS styling configurations, packages and properties.

Contineue to read my follow up blog post that will teach you about creating static, dynamic and nested url routes in Next.js

Thank you.