Routing

Domiex routing follows the Next.js App Router conventions, it uses a file-based routing system where each file in the /app directory corresponds to a route in your application. Subfolders represent nested routes, making it easy to structure complex navigation.

For detailed information & concepts about the Next.js App Router, please refer to the documentation.

1. Setting Up the Project Structure

• Description: Organize your project into layout (with sidebar & topbar) and nonlayout (without them).
• Folder Structure:
  • app
    • (layout) (#sidebar & topbar)
      • layout.tsx
      • newpage/page.tsx
    • (non-layout) (# without sidebar & topbar)
      • layout.tsx
      • auth/page.tsx
    • layout.tsx (#Root Layout)
    • page.tsx (#Main Entry)

Layout
• The layout folder will contain pages that need a sidebar and topbar (e.g., dashboard, chart pages).

Non-Layout
• The layout folder will contain pages without these components (e.g., login, error pages)

2. Creating Pages and Custom Layouts

• Description: Define custom layouts for different sections of the app.
• Folder Structure:
  • app
    • (layout) (#sidebar & topbar)
      • layout.tsx
      • newpage/page.tsx
    • (non-layout) (# without sidebar & topbar)
      • layout.tsx
      • auth/page.tsx
    • (custom-layout) (#add custom sidebar & topbar)
      • layout.tsx (#holds custom sidebar & topbar)
      • settings/page.tsx
    • layout.tsx (#Root Layout)
    • page.tsx (#Main Entry)
• Creating a Custom Layout for a Specific Page:

  // app/custom-layout/layout.tsx
  import Sidebar from "@/components/Sidebar";
                          
  export default function Layout({ children }: { children: React.ReactNode }) {
    return (
          <Sidebar>
           {children}
          <Sidebar/>
   );
  }