NextJs folder structure guideline

src contains the source code of the project. It is divided into the following directories

app/ - Main Application Route Structure

This folder is where the core routing structure is defined in your application. It is used to organize routes, components, and pages specific to different routes.

 `<route-name-folder>`/: Each folder inside the app/ directory corresponds to a route in the application. For example, a folder named products/ would represent the /products route.
    - components/: This folder contains route-specific components used only within that route. For instance, components like product cards or filters for the /products page.
        - `<component-name>`.tsx: These are individual React component files specific to the route.
    - pages/: This folder holds the actual page components used by Next.js routing.
        - index.tsx: The default page for this route (e.g., /products for a products folder).
        - `[dynamic-page]`.tsx: A dynamic route page, used for pages like /products/[id], where id could be a product identifier.
    - layout.tsx: An optional file that defines the layout for this specific route, such as a sidebar or header that should appear on every page within this route.
    - loading.tsx: An optional file for a loading screen or spinner that appears while the page or route data is being fetched.
    - notfound.tsx: An optional file to display a custom 404 page for the route, in case a page doesn't exist for the route.

• common/ - Reusable Logic and Components

This folder contains components, hooks, types, and utilities that are shared across multiple parts of the application.

- components/
    - ui/: UI-related components used throughout the app (e.g., buttons, input fields, modals).
        - <component-name>.tsx: Reusable components like Button.tsx, Modal.tsx, etc.
        - index.tsx: Exports all UI components from this folder for easier importing elsewhere.
    - <component-group-name>/: For grouping related components if necessary (e.g., form elements like input fields, checkboxes, etc.).
        - <component-name>.tsx: Individual components grouped under a specific category.
- hooks/: Custom hooks used across the entire application to encapsulate reusable logic.
    - useAuth.ts: A hook for managing authentication state (e.g., login, logout, user data).
    useForm.ts: A hook to manage form state and logic.
- types/: This folder holds TypeScript interfaces and types used across the app.
    -index.ts: Centralized export for all types, making it easy to import them in any part of the application.
    customTypes.interface.ts: Specific, custom TypeScript interfaces for your application (e.g., User, Product types).
- utils/: Helper utility functions that are used globally in the project.
    format.ts: Functions for formatting strings or dates.
    validators.ts: Functions to validate input data, such as form field validation or email format checking.

• config/ - Configuration Files

This folder contains various configuration settings used across the application, such as API configurations, environment settings, or app-wide settings.

appConfig.ts: Contains general app-wide configuration settings (e.g., app name, version, etc.).
apiConfig.ts: Stores API configurations like base URLs, headers, or other settings needed for making API calls.

• context/ - Context Providers and Global State Management

This folder manages global state using React's Context API, allowing you to share state and functions across the app without needing to pass props down manually.

authStore/: Manages authentication-related state and logic.
    authStore.ts: Defines context and logic related to user authentication (e.g., storing the user's login status or token).
themeStore/: Manages theme-related state, such as dark mode or light mode.
    themeStore.ts: Contains context logic for managing the app's theme.
index.ts: Centralized export file for all context providers, making them easy to import throughout the app.

• styles/ - Global and Modular Styles

This folder holds styles that are either global or specific to certain parts of the application.

globals.css: Global CSS styles that apply across the whole application (e.g., resets, global font styles).
theme.css: Styles related to themes, such as dark mode and light mode.
mixins.css: Reusable CSS mixins and utilities that can be applied in different parts of the app.

• features/ - Feature-Based Modules

This folder allows you to organize your app into feature-based modules, which can be enabled or disabled independently. Each feature can have its own components, hooks, services, and state management.

- feature-x/: Example folder for a feature within the application (e.g., a products feature).
    hooks/: Custom hooks specific to the feature (e.g., useProductFetch.ts).
    components/: Components specific to the feature (e.g., ProductCard.tsx).
    schema/: GraphQL or REST API schemas specific to the feature.
    services/: Services related to the feature, such as API calls for fetching data.
    interfaces/: TypeScript interfaces specific to the feature (e.g., Product.ts).
    featureStore.ts: State management logic for toggling the feature on/off or handling the feature-specific state.
- feature-y/: Another feature folder, following the same structure as feature-x.

This structure provides modularity, reusability, and scalability, organizing the app's logic and UI components in a way that can be easily managed as the app grows.