NextJs App-Router Routing

Routing

---

Next.js, a popular React framework, employs a simple and intuitive routing system that is based on the file structure of your project. This approach, known as file-based routing, offers developers a straightforward way to define routes and organize their application logic.

---

Note:

In a Next.js project, the app directory serves as the cornerstone of routing. Each file within this directory represents a unique route in the application.

• For example:

  app/page.js corresponds to the root route (/),  while app/dashboard/gaming corresponds to /crm.

---

Next.js routing, based on the file system, offers a streamlined and developer-friendly approach to defining routes in web applications. By leveraging the inherent structure of the project directory, Next.js simplifies route management while empowering developers to create dynamic, nested routes.

Basic Route

Following are the fundamental building blocks to creating a route.

    
    import React, { Fragment } from "react";
    import Link from 'next/link';
    import { useRouter } from "next/navigation";
    
    
    <ul>
    <li>
        <Link href="/dashboard/gaming">Gaming
            </Link>
                </li>
                <li>
                <Link href="/dashboard/sales">Sales
                </Link>
                </li>
                <li>
            <Link href="/blog/hello-world">Blog Post
        </Link>
    </li>
    </ul>
    

Configure Link in Menu

---

To Add new link in Sidemenu

Following are the fundamental building blocks to creating a new link.

    ├── shared
    ├──layout-components
        ├──sidebar
            nav.js
            export const MENUITEMS = [
            {
              menutitle: "MAIN",
            },
          
            {
              icon: DashboardIcon,
              badgetxt: badge,
              title: "Dashboards",
              type: "sub",
              active: false,
              children: [
                {
                  path: "/dashboard/gaming",
                  type: "link",
                  active: false,
                  selected: false,
                  title: "CRM",
                },
                {
                  path: "/dashboard/sales",
                  type: "link",
                  active: false,
                  selected: false,
                  title: "Sales",
                },
                {
                  path: "/dashboard/analytics",
                  type: "link",
                  active: false,
                  selected: false,
                  title: "Analytics",
                },
                ]
            }
          ]