Spruha NextJS Typescript App-Router React-Bootstrap Admin & Dashboard Template

NEXTJs 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/router";
	              						
							<ul>
							    <li>
								   <Link href="/">Home
								   </Link>
								   </li>
								<li>
									<Link href="/about">About Us
									</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
├──layouts-components
├──sidebar
├──nav.tsx

export const MENUITEMS:any = [
	{
		menutitle: "Main",
	},
	{
		path: "/components/dashboard/dashboard", title: "Dashboard", icon: "ti-home", type: "link", active: false, selected: false, dirchange: false
	},
	{
		title: "Crypto Currencies", icon: "ti-wallet", type: "sub", active: false, selected: false, dirchange: false,
		children: [
			{ path: "/components/cryptocurrencies/dashboard", type: "link", active: false, selected: false, dirchange: false, title: "Dashboard" },
			{ path: "/components/cryptocurrencies/marketcap", type: "link", active: false, selected: false, dirchange: false, title: "Marketcap" },
			{ path: "/components/cryptocurrencies/currencyexchange", type: "link", active: false, selected: false, dirchange: false, title: "Currency exchange" },
			{ path: "/components/cryptocurrencies/buysell", type: "link", active: false, selected: false, dirchange: false, title: "Buy & Sell" },
			{ path: "/components/cryptocurrencies/wallet", type: "link", active: false, selected: false, dirchange: false, title: "Wallet" },
			{ path: "/components/cryptocurrencies/transcations", type: "link", active: false, selected: false, dirchange: false, title: "Transactions" },
		],
	},
]