Routing in Fuse React with Next.js App Router

Fuse React utilizes Next.js 13's App Router for handling routing in the application. This modern routing system provides a file-system based router built on top of server components, supporting layouts, nested routing, loading states, error handling, and more.

For comprehensive information on Next.js App Router, refer to the official Next.js documentation.

Key Concepts

1. File-based Routing: Routes are defined by the file structure in the app directory.

2. Layouts: Shared UI for multiple pages is defined in layout.tsx files.

3. Route Groups: Organize routes without affecting the URL structure using parentheses in folder names.

4. Dynamic Routes: Create routes with dynamic parameters using square brackets, e.g., [id].

Using MainLayout in layout.tsx

Fuse React provides a MainLayout component that can be used in layout.tsx files to structure the overall layout of your pages. This component allows you to show or hide various sections of the main theme layout.

Here's an example of how to use MainLayout in a public layout:

import MainLayout from '../../components/MainLayout';

function Layout(props: { children: React.ReactNode }) {
	const { children } = props;

	return (
		<MainLayout
			navbar={false}
			toolbar={false}
			leftSidePanel={false}
			rightSidePanel={false}
			footer={false}
		>
			{children}
		</MainLayout>
	);
}

export default Layout;

In this example, the navbar, toolbar, side panels, and footer are hidden for all routes under the (public) group.

Route Access Restriction with AuthGuardRedirect

Fuse React includes an AuthGuardRedirect component that can be used to restrict access to certain routes based on user roles. Here's an example of how to use it in a control panel layout:

import MainLayout from 'src/components/MainLayout';
import AuthGuardRedirect from '@auth/AuthGuardRedirect';

function Layout({ children }) {
	return (
		<AuthGuardRedirect auth={['admin']}>
			<MainLayout>{children}</MainLayout>
		</AuthGuardRedirect>
	);
}

export default Layout;

In this example, access to all routes under the (control-panel) group is restricted to users with the 'admin' role. If a user without the required role tries to access these routes, they will be redirected.

Best Practices

• Use route groups (folders with parentheses) to organize your routes logically without affecting the URL structure.
• Implement shared layouts for groups of related pages to maintain consistency and reduce code duplication.
• Utilize the AuthGuardRedirect component to implement role-based access control for your routes.
• Take advantage of Next.js 13 features like server components and streaming for improved performance and user experience.

By leveraging Next.js App Router and Fuse React's custom components like MainLayout and AuthGuardRedirect, you can create a powerful, flexible, and secure routing system for your application.