Project Structure

Useful Best Practices articles

Articles

• React Architecture: How to Structure 
  
• React Project Strucutre 
  
• Next.js Enterprise Project Structure 

Overview

• .
  • environments
    • .env.dev
    • .env.prod
    • .env.staging
  • messages
    • fr.json
    • en.json
  • public
  • src
    • app
      • [locale]
      • api
    • components
    • containers
    • contexts
    • hooks
    • i18n
    • libs
    • utils
    • middleware.ts

What Does Each Section Do?

Root Directory (".")

This represents the project root folder, containing all essential subdirectories.

📁 environments/

Stores environment configuration files for different deployment stages.

• .env.dev → Development environment settings.
• .env.prod → Production environment settings.
• .env.staging → Staging environment settings.

📁 messages/

Contains localization (i18n) files for different languages.

• fr.json → French translations.
• en.json → English translations.

📁 public/

Next.js default folder for storing static assets like images, videos, and fonts.

📁 src/

Main source code directory, containing the core application logic.

📂 src/app/

Manages Next.js App Router structure and page-based navigation.

• 📂 [locale]/ → Dynamic route folder for different languages.

  • 📂 pricing/ → Contains the pricing page for each locale.
    • 📄 page.tsx → The main page component for /[locale]/pricing.

• 📂 api/ → Handles Next.js API routes.

  • 📂 products/ → API endpoint folder for product-related operations.
    • 📄 route.ts → API logic for handling product requests.

📂 src/components/

Contains reusable UI components.

• 🔹 icons/ → SVG icons converted into React components.
• 🔹 primitives/ → Basic UI elements like buttons and inputs.
• 🔹 sections/ → Feature-specific UI components.

📂 src/containers/

Contains higher-level components that group multiple components together to form a section of a page.

📂 src/contexts/

Stores React Context providers for managing global state.

📂 src/hooks/

Custom React hooks, such as:

• Authentication hooks
• React Query hooks for fetching data

📂 src/i18n/

Handles internationalization (i18n) settings for translations and localization logic.

📂 src/libs/

Includes third-party libraries and configurations, such as:

• API services (Axios instances)
• Utility functions
• Global state management

📂 src/utils/

Contains helper functions, constants, and TypeScript types.

📄 middleware.ts

Defines Next.js middleware, often used for authentication, redirects, or custom headers.

Import Alias

The project is set up to use Typescript path alias, instead of importing like this ../../../../component/example.jsx, we best import like that : @/components/example anywhere in the project .