Next.js src Directory

The NextJS src directory is a project structure that is optional but is widely recommended. It helps to organize the project in a well-defined structure.

Organizing a Next.js project with a well-planned folder structure is important for readability, scalability, and maintainability. A clear structure helps manage code, configurations, modules, and other assets effectively. In this article, we’ll explore the best practices for organizing the folder structure of a Next.js project, focusing on the src directory.

Prerequisites:

To understand the folder structure for a Next.js project, ensure you have:

• Basic knowledge of Next.js and npm
• A code editor or IDE
• Node.js installed on your machine

NextJS SRC directory

It is an optional project structure that is used to separate the src files from the configurations, build, scripts, and other project files. It provides clean folder structure.

The src directory mainly contains the pages, components, API routes, styles, assets, and other functions as given below

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

• 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/: Contains Reusable React Components

This directory contains all the reusable React components. Components are the building blocks of your application, containing UI elements and logic in a modular way. By placing them here, you ensure that your UI is easily maintainable and reusable.

2. pages/: Contains Page Components, Automatically Routed by Next.js

The pages directory is special in Next.js. Each file in this directory corresponds to a route in your application. For instance, pages/index.js maps to the home page (/), and pages/about.js maps to /about.

3. styles/: Contains CSS and Other Styling Files

The styles directory is used for all your CSS or styling needs. This can include global stylesheets, CSS modules, and styled-components. Organizing your styles here keeps them separate from your components and pages, making them easier to manage.

4. contexts/: Manages Global State Using React Context API

The contexts directory is for managing global state using the React Context API. Contexts allow you to share state across multiple components without having to pass props down manually at every level of the component tree.

5. hooks/: Contains Custom Hooks for Reusing Stateful Logic

The hooks directory contains custom React hooks, which are functions that allow you to reuse stateful logic across multiple components. Hooks are a powerful feature for encapsulating and sharing complex logic.

6. services/: Handles API Calls and Other Services

The services directory is used for files responsible for handling API calls, authentication, and other backend services. This separation helps to keep the logic for interacting with external resources isolated from your UI components.

7. utils/: Stores Utility Functions Used Across the Project

Utility functions that are used across your application can be placed in the utils directory. These functions might include date formatting, data transformation, or other common tasks that don’t fit neatly into other directories.

8. assets/: Stores Static Assets Like Images, Fonts, etc.

The assets directory is for static files like images, fonts, and other media. Keeping these files in a dedicated directory helps you manage and locate these resources easily.

9. config/: Contains Configuration Files Such as Environment Variables

The config directory holds configuration files, such as those for environment variables, settings for third-party services, or other configuration needs. This keeps your configuration organized and separate from your application logic.

Summary

The src directory is an optional folder convention that helps to maintain a well defined project structure by separating all the source files from other project files. It is widely recommended structure especially in case of large scale projects.