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.

PreviousProject SetupNextTheme