Next.js src Directory

Next.js src Directory is used to organize the main application code inside a dedicated folder, making the project cleaner and easier to manage. It separates source code from configuration and root-level files.

• Contains core application code such as pages, components, hooks, and utilities.
• Improves project organization by grouping all development files in one place.
• Helps maintain scalability as the project grows larger.

Folder Structure Overview:

The folder structure contains the files and folders that are present in the directory. There are multiple files and folders, for example, pages, components, utils, assets, styles, contexts, services, and layouts.

Features

"src" Directory highlight how it improves project organization by keeping the main application code structured and separate from configuration files.

• It is an optional directory and has no effect on the project funtionality
• No extra configurations are required to implement the src directoty
• It keeps the project structure clean and well maintained by separating the all the source file in a different directory.
• As the project grow it makes the structure more organised and managable.

Steps to create Next app with "src" directory

Step 1: Create a new Next.js project with the given command

npx create-next-app my-app

Step 2: Move to project

cd my-app

Step 3: Create necessary folders and files inside src directory.

mkdir components
mkdir assets
mkdir config
mkdir contexts
mkdir hooks
mkdir pages
mkdir services
mkdir styles
mkdir utils

Improved Files and Folders Structure

For managing the project in more concise way we can create these folder for more manageable code.

1. components/

components/ Folder contains reusable UI components that are used across multiple pages in a Next.js application. It helps maintain a modular and clean code structure by separating UI elements from page logic.

• Reusable UI Elements: Stores components like buttons, cards, headers, and modals.
• Improves Maintainability: Changes made to a component update everywhere it is used.
• Promotes Modular Design: Breaks the UI into smaller, manageable pieces for better development.

2. pages/

pages/ Folder is used in Next.js to define application routes based on file names. Each file inside this folder automatically becomes a route in the application.

• File-based Routing: Every file inside pages/ automatically creates a corresponding URL route.
• Supports API Routes: The pages/api/ directory is used to create backend API endpoints.
• Page Components: Each file exports a React component that represents a page.

3. styles/

styles/ Folder is used to manage the styling of a Next.js application. It stores global styles and CSS modules used to style different components and pages.

• Global Styles: Contains global CSS files applied across the entire application.
• CSS Modules: Allows component-level styling with scoped CSS files.
• Improves Maintainability: Keeps styling organized and separate from logic.

4. contexts/

contexts/ Folder is used to store React Context files that manage global state across the application. It helps share data between components without passing props through multiple levels.

• Global State Management: Stores context providers for sharing data across components.
• Avoids Prop Drilling: Allows components to access shared data directly.
• Improves Code Organization: Keeps context logic separate from UI components.

5. hooks/

hooks/ Folder stores custom React hooks that encapsulate reusable logic used across multiple components. It helps keep components clean and promotes code reusability.

• Custom Hooks: Contains reusable hooks like useAuth, useFetch, or useTheme.
• Logic Reusability: Allows sharing common functionality across different components.
• Cleaner Components: Separates business logic from UI components.

6. services/

services/ Folder is used to manage API calls and business logic related to external services. It helps keep data fetching and service-related code separate from UI components.

• API Communication: Handles requests to external APIs or backend services.
• Centralized Logic: Keeps service-related functions in one place.
• Improves Maintainability: Makes it easier to update or manage API integrations.

7. utils/

utils/ Folder stores helper and utility functions used across different parts of the application. It helps avoid repeating common logic and keeps the codebase organized.

• Reusable Functions: Contains helper functions for tasks like formatting, validation, or calculations.
• Code Reusability: Allows shared logic to be used across multiple components and services.
• Better Organization: Keeps utility logic separate from core application code.

8. assets/

assets/ Folder is used to store static resources used within the application’s UI. It helps organize files like images, fonts, and icons that are reused across components.

• Static Resources: Contains images, fonts, icons, and other media files.
• Reusable Assets: Allows assets to be easily imported into components or pages.
• Better Organization: Keeps media files separate from application logic.

9. config/

config/ Folder stores configuration files used to manage application settings and environment-based setups. It helps centralize configuration values used across the project.

• Application Settings: Contains configuration files for APIs, environment variables, or app settings.
• Environment Management: Helps manage different configurations for development and production.
• Centralized Configuration: Keeps configuration logic separate from business logic.