📂 File Structure (App Router)

The TailAdmin Next.js file structure is designed to allow the use of the App Router, offering a clear separation between pages, layouts, and other essential resources. By properly organizing your project, you can take full advantage of Next.js’s features, such as SSR, SSG, ISR, and more.

Here’s an overview of the file structure:

• 📂 public/ — Contains static files such as favicon.ico, fonts, and other assets.

  • 📂 images/ — Contains all image files used in the project.

• 📂 src/ — Contains the source code of your Next.js app.

  • 📂 app/ — The core directory for Next.js pages and layouts (App Router).

    • 📄 layout.tsx — Root layout component for the entire application.
    • 📄 page.tsx — The main entry point for the homepage.
    • 📂 dashboard/ — Dashboard route.
      • 📄 page.tsx — Dashboard main page.
      • 📂 analytics/ — Analytics subpage.
        • 📄 page.tsx — Analytics dashboard page.
      • 📂 crm/ — CRM subpage.
        • 📄 page.tsx — CRM dashboard page.
      • 📂 ecommerce/ — E-commerce subpage.
        • 📄 page.tsx — E-commerce dashboard page.
      • 📂 marketing/ — Marketing subpage.
        • 📄 page.tsx — Marketing dashboard page.

  • 📂 components/ — Contains reusable components used across the app.

    • 📂 common/ — Contains commonly used reusable components like breadcrumb.
    • 📂 ui/ — Contains UI-specific reusable components like buttons and modals.

  • 📂 contexts/ — Contains React Context providers for managing global state.

    • 📂 SidebarContext/ — Manages sidebar-related state across the application.
    • 📂 ThemeContext/ — Handles theme preferences (dark/light mode).

  • 📂 hooks/ — Contains custom React hooks to reuse logic across components.

  • 📂 utils/ — Contains utility functions for common tasks like formatting dates, API helpers, etc.

• 📄 next.config.js — Next.js configuration file.

• 📄 package.json — NPM package configuration and dependencies.

• 📄 tailwind.config.js — Tailwind CSS configuration file.

• 📄 tsconfig.json — TypeScript configuration file.

• 📄 .eslintrc.js — ESLint configuration for code linting.

• 📄 .gitignore — Specifies files and folders to be ignored by Git.

This file structure for TailAdmin Next.js provides a clean, modular, and scalable way to manage both the frontend and backend aspects of your project. The use of the App Router allows for better routing management and smoother navigation between different sections of your dashboard.