Next.js Project File Structure
This is a detailed file structure for a Next.js project organized by features and components. It includes directories for reusable components, pages, styles, services, context, hooks, and utilities.
1. Root Directory
/nextjs-project
├── /public
├── /src
├── /node_modules
├── .gitignore
├── .env.local
├── .eslintrc.json
├── .prettierrc
├── next.config.js
├── package.json
├── tsconfig.json
└── README.md
2. /public Directory
/public
├── /assets
├── /images
└── favicon.ico
3. /src Directory
The core of your project where all your application logic and code reside.
a. /src/components Directory
/src/components
├── /Button
│ ├── Button.tsx
│ └── Button.module.css
├── /Header
│ ├── Header.tsx
│ └── Header.module.css
├── /Footer
│ ├── Footer.tsx
│ └── Footer.module.css
└── /Card
├── Card.tsx
└── Card.module.css
b. /src/pages Directory
/src/pages
├── /index.tsx
├── /about.tsx
├── /contact.tsx
├── /blog.tsx
├── /blog/[slug].tsx
├── /api
│ ├── /auth.ts
│ └── /data.ts
└── /_app.tsx
c. /src/styles Directory
/src/styles
├── globals.css
├── tailwind.config.js
├── theme.ts
└── /modules
├── Button.module.css
└── Header.module.css
d. /src/context Directory
/src/context
├── AuthContext.tsx
├── ThemeContext.tsx
└── GlobalStateProvider.tsx
e. /src/hooks Directory
/src/hooks
├── useAuth.ts
├── useFetch.ts
└── useLocalStorage.ts
f. /src/services Directory
/src/services
├── api.ts
├── authService.ts
├── blogService.ts
└── userService.ts
g. /src/utils Directory
/src/utils
├── formatDate.ts
├── generateSlug.ts
├── validateEmail.ts
└── constants.ts
h. /src/lib Directory
/src/lib
├── firebase.ts
├── analytics.ts
└── stripe.ts
i. /src/types Directory
/src/types
├── auth.ts
├── blog.ts
├── user.ts
└── global.ts
j. /src/layouts Directory
/src/layouts
├── MainLayout.tsx
└── DashboardLayout.tsx
4. /src/api Directory (Optional)
/src/api
├── /auth
│ ├── login.ts
│ └── logout.ts
├── /posts
│ ├── getPosts.ts
│ └── createPost.ts
└── /users
├── getUsers.ts
└── updateUser.ts
5. /src/tests Directory (Optional)
/src/tests
├── /components
│ ├── Button.test.tsx
│ └── Header.test.tsx
├── /services
│ └── authService.test.ts
└── /utils
└── formatDate.test.ts
6. Other Important Files
- next.config.js
- .env.local
- package.json
Example of package.json
{
"name": "nextjs-project",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint .",
"test": "jest"
},
"dependencies": {
"next": "^13.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"axios": "^0.27.2",
"tailwindcss": "^3.0.7",
"styled-components": "^5.3.3"
},
"devDependencies": {
"eslint": "^7.32.0",
"jest": "^27.4.5",
"babel-jest": "^27.4.5"
}
}