My Nextjs Project Architecture

Everytime, I create a nextjs project, I follow a certain architecture.

Following a consistent architecture helps me to be more productive, as I am not confused to place the things, and also find the things easily.

My nextjs project architecture is as follows:

├── components
│   ├── common
│   │   ├── Footer
│   │   │   ├── Footer.tsx
│   │   │   └── index.ts
│   │   ├── Header
│   │   │   ├── Header.tsx
│   │   │   └── index.tsx
│   │   └── index.ts
│   ├── layout
│   │   ├── Layout.tsx
│   │   └── index.tsx
│   └── index.ts
├── constants
│   ├── index.ts
│   └── routes.ts
├── hooks
│   ├── useLocalStorage.ts
│   └── index.ts
├── app
│   ├── layout.tsx
│   ├── page.tsx
│   └── index.module.css
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── global.css
│   └── index.js
├── utils
│   ├── index.js
│   └── someUtil.js
├── .babelrc
├── .eslintrc
├── .gitignore
├── .prettierrc
├── next.config.js
├── package.json
├── README.md
└── yarn.lock

Explanation

Each of these folders serves specific purpose. Let's discuss them one by one.

Components

This folder contains all the components of the project.

It is further divided into two folders: common and layout.

Common

This folder contains all the common components of the project. These components are used in multiple places of the project.

Layout

This folder contains all the layout components of the project. These components are used in the layout of the project.