Scalable File Folder Structure which I Follow for Next Js and Nest JS

Scalable File Folder Structure which I Follow for Next Js and Nest JS

💡
for file structure please scroll two code blocks down initially i have pasted out some routing practices in NEXT JS

Routes Grouping structure in Next JS

app/
├── (services)/                 # Grouping of routes under "services"
│   ├── travel/
│   │   ├── components/         # Travel-specific components
│   │   │   ├── TravelCard/
│   │   │   │   ├── index.tsx   # TravelCard component logic
│   │   │   │   ├── style.ts    # Styles for TravelCard
│   │   │   │   └── types.ts    # Types for TravelCard component
│   │   ├── page.tsx            # Travel page
│   │   ├── layout.tsx          # Layout for service pages
│   ├── tour/
│   │   ├── components/         # Tour-specific components
│   │   │   ├── TourCard/
│   │   │   │   ├── index.tsx   # TourCard component logic
│   │   │   │   ├── style.ts    # Styles for TourCard
│   │   │   │   └── types.ts    # Types for TourCard component
│   │   ├── page.tsx            # Tour page
│   │   ├── layout.tsx          # Layout for service pages

Nested Routing structure in Next JS

app/
├── (services)/                 # Grouping of routes under "services"
│   ├── travel/
│   │   ├── hotels/             # Nested route for hotels
│   │   │   ├── page.tsx        # Hotels page
│   │   │   ├── components/     # Components specific to hotels
│   │   │   │   ├── HotelCard/
│   │   │   │   │   ├── index.tsx   # HotelCard component logic
│   │   │   │   │   ├── style.ts    # Styles for HotelCard
│   │   │   │   │   └── types.ts    # Types for HotelCard
│   │   ├── destinations/        # Nested route for destinations
│   │   │   ├── page.tsx        # Destinations page
│   │   │   ├── components/     # Components specific to destinations
│   │   │   │   ├── DestinationCard/
│   │   │   │   │   ├── index.tsx   # DestinationCard component logic
│   │   │   │   │   ├── style.ts    # Styles for DestinationCard
│   │   │   │   │   └── types.ts    # Types for DestinationCard
│   │   ├── page.tsx            # Travel main page
│   │   └── layout.tsx          # Layout for service pages
│   ├── tour/
│   │   ├── page.tsx            # Tour page
│   │   ├── layout.tsx          # Layout for service pages

📁 File Structure I follow for Next JS


my-project/
├── app/
│   ├── auth/                   # Auth module
│   │   ├── components/         # Auth-specific components
│   │   │   ├── login/          # Example component for Login
│   │   │   │   ├── index.tsx   # Component logic for Login
│   │   │   │   ├── style.ts    # Styles for Login
│   │   │   │   └── types.ts    # Types for Login component
│   │   ├── hooks/              # Auth-specific hooks (for API calls)
│   │   │   └── useAuth.ts      # Hook for managing auth API calls
│   │   ├── layout.tsx          # Layout for the auth module
│   │   ├── page.tsx            # Main page for the auth module
│   │   └── styles/             # Auth-specific styles (global or scoped)
│   ├── home/                   # Home module
│   │   ├── components/         # Home-specific components
│   │   │   ├── hero/           # Example component for Hero section
│   │   │   │   ├── index.tsx   # Component logic for Hero section
│   │   │   │   ├── style.ts    # Styles for Hero section
│   │   │   │   └── types.ts    # Types for Hero component
│   │   ├── hooks/              # Home-specific hooks (for API calls)
│   │   │   └── useHomeData.ts  # Hook for managing home API calls
│   │   ├── layout.tsx          # Layout for the home module
│   │   ├── page.tsx            # Main page for the home module
│   │   └── styles/             # Home-specific styles
│   ├── about/                  # About module
│   │   ├── components/         # About-specific components
│   │   │   ├── team/           # Example component for Team section
│   │   │   │   ├── index.tsx   # Component logic for Team section
│   │   │   │   ├── style.ts    # Styles for Team section
│   │   │   │   └── types.ts    # Types for Team component
│   │   ├── layout.tsx          # Layout for the about module
│   │   ├── page.tsx            # Main page for the about module
│   │   └── styles/             # About-specific styles
│   ├── components/             # Global reusable components
│   │   ├── navbar/             # Example component for Navbar
│   │   │   ├── index.tsx       # Component logic for Navbar
│   │   │   ├── style.ts        # Styles for Navbar
│   │   │   └── types.ts        # Types for Navbar component
│   ├── hooks/                  # Global hooks for API calls
│   │   └── useApi.ts           # Global hook for handling API calls
│   ├── lib/                    # Shared logic and utility functions
│   │   ├── urls.ts             # URL constants for API endpoints
│   │   ├── errors.ts           # Centralized error handling utilities
│   └── errorBoundary.tsx       # Global Error Boundary component
│   └── translations/           # Localization files (i18n)
│       ├── en/                 # English translations
│       │   └── common.json     # Common strings
│       └── es/                 # Spanish translations
│           └── common.json     # Common strings
├── public/                     # Public assets (images, fonts, etc.)
│   ├── images/                 # Image assets
│   ├── fonts/                  # Font assets
│   └── downloads/              # Downloadable files
├── redux/                      # Redux store setup
│   ├── constants/              # Global constants for Redux actions
│   ├── services/                   # New services folder for business logic
│        ├── authService.ts          # Handles login, registration, etc.
│        ├── homeService.ts          # Handles home-related data fetching
│   ├── slices/                 # Redux slices (reducers, actions)
│   │   ├── authSlice.ts        # Auth-related state management
│   │   ├── homeSlice.ts        # Home-related state management
│   │   └── aboutSlice.ts       # About-related state management
│   ├── middlewares/            # Redux middlewares (e.g., Thunk)
│   └── store.ts                # Redux store configuration
├── tests/                      # Testing directory
│   ├── components/             # Component tests
│   ├── integration/            # Integration tests
│   ├── e2e/                    # End-to-end tests (e.g., Cypress)
│   └── utils/                  # Utility tests
├── theme/                      # Global theme handling
│   ├── colors.ts               # Global color schemes
│   ├── fonts.ts                # Global font sizes and styles
│   └── spacing.ts              # Spacing variables for margins/padding
├── docs/                       # Project documentation
│   ├── setup.md                # Setup instructions
│   ├── architecture.md          # Architecture diagrams and notes
│   └── contribution.md          # Contribution guidelines
├── config/                     # Environment-specific configurations
│   ├── development.ts          # Development-specific config
│   ├── production.ts           # Production-specific config
│   └── staging.ts              # Staging-specific config
├── ci/                         # CI/CD scripts and configurations
│   └── github/                 # GitHub Actions workflows
│       └── main.yml            # Example workflow file
├── env.ts                      # Environment variables
├── package.json                # Package dependencies
└── tsconfig.json               # TypeScript configuration

📁 File Structure I follow for Nest JS

src/
├── area/                      # Module for area-related logic
│   ├── area.controller.ts     # Controller for area
│   ├── area.service.ts        # Service for area logic
│   ├── area.module.ts         # Area module definition
│   ├── dto/                   # DTOs for area
│   │   ├── create-area.dto.ts # DTO for creating an area
│   │   └── update-area.dto.ts # DTO for updating an area
│   ├── entities/              # Entities for area
│   │   └── area.entity.ts      # Area entity
│   └── interfaces/            # Interfaces for area
│       └── area.interface.ts   # Area-related interfaces
├── auth/                      # Auth module
│   ├── auth.controller.ts      # Controller for auth
│   ├── auth.service.ts         # Service for auth logic
│   ├── auth.module.ts          # Auth module definition
│   ├── dto/                    # DTOs for auth
│   │   ├── login.dto.ts        # DTO for login
│   │   └── register.dto.ts     # DTO for registration
│   ├── entities/               # Entities for auth
│   │   └── user.entity.ts       # User entity
│   ├── interfaces/             # Interfaces for auth
│   │   └── auth.interface.ts    # Auth-related interfaces
│   └── guards/                 # Guards for auth
│       └── jwt.guard.ts        # JWT guard
├── common/                    # Common utilities and shared logic
│   ├── decorators/            # Custom decorators
│   ├── filters/               # Exception filters
│   ├── interceptors/          # Interceptors
│   ├── pipes/                 # Validation pipes
│   └── utils/                 # Utility functions
├── data-retention/            # Module for data retention logic
│   ├── data-retention.controller.ts # Controller for data retention
│   ├── data-retention.service.ts    # Service for data retention
│   └── data-retention.module.ts     # Data retention module definition
├── db/                        # Database-related files
│   ├── auth/                   # Auth database operations
│       ├── auth-db.repository.ts # Repository for readings
│       └── auth-db.service.ts    # Service for readings
│   ├── prisma/                 # Prisma ORM files
│   │   ├── migrations/         # Database migrations
│   │   ├── seed/               # Seed data for database
│   │   ├── prisma.module.ts    # Prisma module definition
│   │   └── prisma.service.ts   # Prisma service
│   ├── schema.prisma           # Prisma schema definition
├── app.module.ts               # Root application module
├── main.ts                     # Entry point of the application
├── test/                       # Tests
│   ├── auth.e2e-spec.ts        # End-to-end tests for auth module
│   ├── users.e2e-spec.ts       # End-to-end tests for users module
│   └── reports.e2e-spec.ts     # End-to-end tests for reports module
├── .env                        # Environment variables
├── .env.sample                 # Sample environment variables
├── .eslintrc.js                # ESLint configuration
├── package.json                # Package dependencies
└── tsconfig.json               # TypeScript configuration