Folder structure
Below is an example for the conventions and folder and file naming conventions which should be followed.
The following folder tree is basically an example of how a scalable Nextjs application architecture might look and can be customized according to the developers' wish or to any project as required.
As the pages directory is solely for routing purposes as stated by Nextjs; another folder named features can be created to store the necessary files needed for each module such as the home module which can contain its own components, utilities and its own layout. Please check and go through the documentation on the pages directory and the layouts provided by the official NextJs team NextJs/pages (opens in a new tab) & NextJs/layouts (opens in a new tab).
The _app.tsx is the entry point and index.tsx file is the / route which are found inside the pages directory for every Nextjs application.
The document structure of the DOM can be altered from the _document.js file inside the pages directory. NextJs/_document (opens in a new tab)
Any file which has [] around its name inside the pages directory will be treated as a dynamic page by Next automatically.
📦
├─ .env.example
├─ .eslintrc.json
├─ .gitignore
├─ .husky
│ ├─ commit-msg
│ ├─ pre-commit
│ └─ pre-push
├─ .npmrc
├─ .prettierignore
├─ .prettierrc
├─ .vscode
│ └─ settings.json
├─ README.md
├─ commitlint.config.js
├─ features
│ ├─ auth
│ │ ├─ interfaces
│ │ │ └─ shared.interface.ts
│ │ ├─ layout
│ │ │ ├─ auth.styles.ts
│ │ │ └─ index.tsx
│ │ ├─ layouts
│ │ │ └─ main
│ │ │ └─ index.tsx
│ │ └─ login
│ │ └─ interface
│ │ └─ index.ts
│ ├─ home
│ │ └─ components
│ │ ├─ chart
│ │ │ └─ index.tsx
│ │ ├─ stats-card
│ │ │ └─ index.tsx
│ │ └─ user-table
│ │ └─ index.tsx
│ └─ users
│ └─ components
│ └─ user-list
│ └─ index.tsx
├─ middleware.ts
├─ next.config.js
├─ package.json
├─ pages
│ ├─ _app.tsx # entry point and all the routes and index.tsx is the / route.
│ ├─ api
│ │ ├─ auth
│ │ │ └─ login
│ │ │ └─ index.ts
│ │ └─ hello.ts
│ ├─ auth
│ │ └─ login
│ │ ├─ index.tsx
│ │ └─ login.styles.ts
│ ├─ index.tsx
│ ├─ settings
│ │ └─ index.tsx
│ └─ users
│ ├─ [userId]
│ │ └─ index.tsx
│ ├─ create
│ │ └─ index.tsx
│ ├─ index.tsx
│ └─ users.styles.ts
├─ public
│ ├─ favicon.ico
│ └─ vercel.svg
├─ shared
│ ├─ axios
│ │ └─ index.ts
│ ├─ components
│ │ ├─ buttons
│ │ │ ├─ primary-button
│ │ │ │ └─ index.tsx
│ │ │ └─ secondary-button
│ │ │ └─ index.tsx
│ │ ├─ spinner
│ │ │ └─ index.tsx
│ │ └─ upload-file
│ │ └─ index.tsx
│ ├─ config
│ │ └─ index.ts
│ ├─ hooks
│ │ └─ store.hook.ts
│ ├─ layouts
│ │ └─ main
│ │ ├─ header
│ │ │ └─ index.tsx
│ │ ├─ index.tsx
│ │ ├─ main-layout.scss
│ │ └─ side-bar
│ │ └─ index.tsx
│ ├─ theme
│ │ └─ index.ts
│ └─ utils
│ └─ toast.util.ts
├─ store
│ ├─ index.ts
│ └─ slices
│ └─ user-slice
│ └─ index.ts
├─ styles
│ └─ globals.scss
├─ tsconfig.json
└─ yarn.lock