Folder Structure

This document outlines a clean and organized folder structure for a Next.js project, centered around the @wieldy core system, which provides the foundation for reusable components and utilities.

---

Folder Structure:

WIELDY-4.X

Root directory of the project.

• @assets

  • Contains static assets such as images, icons, and fonts used across the application.

• @wieldy

  • Core Description: The backbone of the application, offering modular and reusable components for consistent functionality.

  • components

    • WieldyContainer: Container component for managing layout spacing.

    • WieldyLayout: Base layout component for structuring pages.

    • WieldyTheme: Theme provider for applying consistent styles.

    • index.ts: Entry point for exporting all @wieldy components.

  • utils

    • Utility functions and helpers to enhance reusability.

• public

  • Static files accessible via direct URLs, such as images or static assets.

• src

  • _components

    • Shared UI components reused across the project.

  • _config

    • Centralized configuration files for themes, layouts, and application settings.

  • _dictionaries

    • Files supporting multilingual translations and text dictionaries.

  • _hooks

    • Custom React hooks for logic reuse.

  • _middleware

    • Middleware logic for handling routing and API operations.

  • _themes

    • Theme objects, such as dark and light mode configurations.

  • _utilities

    • Helper functions and constants shared throughout the application.

  • app

    • Dynamic routes, layouts, and API handlers for the application.

  • types

    • TypeScript type definitions to ensure type safety across the project.

• middleware.ts

  • Custom middleware logic for advanced request handling.

---

Root Files:

• .eslintrc.json: Configuration for ESLint to enforce code quality.

• .prettierrc.json: Configuration for Prettier to maintain consistent formatting.

• next.config.mjs: Configuration file for customizing Next.js behavior.

• package.json: Defines project dependencies and scripts.

• postcss.config.js: Configuration for PostCSS.

• README.md: Project documentation and guidelines.

• tailwind.config.js: Tailwind CSS customization file.

• tsconfig.json: Configuration file for TypeScript.

---

Key Highlights:

• Scalable: Modular organization ensures scalability for larger projects.

• Reusability: system facilitates consistent and reusable components.

• Maintainability: Clear separation of concerns simplifies project maintenance.