Folder Structure for a Next.js Project

When starting a Next.js project, one of the most important things to consider is how you organize your codebase. A well-structured project can make development smoother, easier to scale, and simpler for other developers to collaborate. In this blog, I'll walk you through an efficient folder structure that can help keep your Next.js project clean, organized, and maintainable.

Why a Proper Folder Structure?
A consistent and thoughtful folder structure:

• Helps you and your team find code faster.
• Encourages reusable components and better code organization.
• Makes it easier to scale your project as it grows.
• Improves collaboration between developers by providing clear guidelines.

Now, let's break down the recommended folder structure for a typical Next.js project.

my-nextjs-project/
│── public/            # Static assets (images, fonts, etc.)
│── src/               # Main source code  
│   ├── components/    # Reusable UI components  
│   ├── layouts/       # Layout components (Navbar, Footer, etc.)  
│   ├── pages/         # Next.js pages (Routing is handled here)  
│   ├── styles/        # Global styles (CSS, SCSS, Tailwind, etc.)  
│   ├── hooks/         # Custom React hooks  
│   ├── utils/         # Helper functions and utilities  
│   ├── context/       # Context API for global state management  
│   ├── services/      # API calls and data fetching logic  
│   ├── store/         # Redux or Zustand store (if using state management)  
│   ├── middleware/    # Authentication & authorization logic  
│   ├── config/        # Configuration files (e.g., environment variables)  
│   ├── constants/     # Constant values (e.g., roles, URLs, static data)  
│── .env               # Environment variables  
│── next.config.js     # Next.js configuration  
│── package.json       # Project metadata and dependencies  
│── README.md          # Project documentation  
│── tsconfig.json      # TypeScript configuration (if using TypeScript)  

Explanation of Each Folder and File
1. public/: Static Assets
This folder is for static files that you need to serve publicly, such as images, fonts, and other resources. These files will be accessible through the /public path in your app.

2. src/: Main Source Code
Everything that makes your app work should reside under src/. This is the core of your Next.js project, and within it, you'll find the subfolders that contain specific parts of your application.

• components/: This folder contains reusable UI components. If you have elements like buttons, cards, or modals that are used across multiple pages, you should place them here.

• layouts/: Here, you can store layout components like headers, footers, or sidebars. These layouts can be used across multiple pages to provide consistent structure.

• pages/: In Next.js, the pages folder is where routing is handled. Each file in this folder corresponds to a route in your application. For example, index.js is the homepage, about.js is the about page, and so on.

• styles/: Centralized place for your CSS, SCSS, or Tailwind setup. By keeping your styles in one location, it’s easier to manage them and apply global styles.

• hooks/: Custom React hooks for your application go here. If you're reusing logic across multiple components (e.g., data fetching or form validation), it's a good idea to encapsulate that in custom hooks.

• utils/: Utility functions that are used throughout your app should go in this folder. Things like date formatting functions, validators, or any other helper functions can be placed here.

• context/: If you are using React’s Context API for global state management, this folder should contain all of your context-related code (e.g., providers, consumers).

• services/: API calls and data-fetching logic should be placed here. This folder acts as the middle layer between your app and external services (e.g., REST APIs or databases).

• store/: If you are using a state management library like Redux or Zustand, your store logic will go in this folder. This includes actions, reducers, and the global state.

• middleware/: This folder contains logic for things like authentication and authorization. It’s where you can define how to handle user permissions or server-side logic.

• config/: All your configuration files go here, such as environment variables, API keys, and other settings that can vary between different environments (development, staging, production).

• constants/: This folder can contain constant values that are used throughout the app. These can include things like role definitions, error messages, and API endpoint URLs.

3. .env: Environment Variables
The .env file is where you store sensitive information like API keys, database credentials, and environment-specific settings. It helps separate configuration from code.

4. next.config.js: Next.js Configuration
This file is where you configure Next.js-specific settings, such as custom routing, rewrites, or environment variables. It's useful when you need to tweak how Next.js behaves.

5. package.json: Project Metadata
This file holds information about the project, including dependencies, scripts, and other configurations that define how your project works.

6. README.md: Documentation
A README file is essential for documenting your project. It explains how to set up, use, and contribute to your project.

7. tsconfig.json: TypeScript Configuration
If you're using TypeScript, this file contains the configuration for TypeScript-related features and settings.

Conclusion
A solid folder structure is key to maintaining a clean and scalable Next.js project. By organizing your project into logical components, services, and utilities, you’ll set yourself up for success as the project grows. This structure will help improve the maintainability and scalability of your application, making it easier for you and your team to navigate, extend, and debug.

If you found this blog helpful, feel free to connect with me on LinkedIn or leave a comment below with your thoughts. Happy coding!