Add New Route

In the Nextjs app we have to add routes in the src/pages directory. this is the default route directory of the Nextjs. To add new route in the Nextjs you need to follow the following two steps.

1. In the First step, If you wants to add new menu in the sidebar, you need to follow the following steps.

   • Go to the file with the path: -

     src/modules/routesConfig.js

   • Adding a group of menu's:-

     If you want to add a group of menus, Just add a new object in the above-said file with the following properties as shown below-

     const routesConfig = [
     ...,
       {
         id: 'new-group',
         title: 'Gropup Name',
         messageId: 'sidebar.app.newGroup',
         type: 'group',
         children:[...]
       }
     ]

     The children's property of a group contains objects as shown below.

     const routesConfig = [
     ...,
       {
         id: 'new-group',
         title: 'Gropup Name',
         messageId: 'sidebar.app.newGroup',
         type: 'group',
         children: [
           {
             id: 'new-menu',
             title: 'New Menu',
             messageId: 'sidebar.app.dashboard.newMenu',
             type: 'item',
             icon: 'menu_icon',
             url: '/new-group/new-menu',
           },
           ...
         ],
       },
     ];

   • Adding Collapse type Menu:-

     To add a collapse type menu, go to the 'routesConfig' file (path given in step 1) and add a new object to the 'routesConfig' array. The new object show look like this:-

     const routesConfig = [
     ...,
       {
         id: 'new-group',
         title: 'Gropup Name',
         messageId: 'sidebar.app.newGroup',
         type: 'collapse',
         children:[...]
       }
     ]

   • Adding a menu item:-

     Adding a menu item is very easy, You just have to add an object in the 'routesConfig' array in the 'routesConfig' file (path given in step 1). The Item object should look contain the following properties as shown in the screenshot shown below.

     const routesConfig = [
     ...,
       {
         id: 'new-group',
         title: 'Gropup Name',
         messageId: 'sidebar.app.newGroup',
         type: 'collapse',
         children: [
           {
             id: 'new-menu',
             title: 'New Menu',
             messageId: 'sidebar.app.dashboard.newMenu',
             type: 'item',
             icon: 'menu_icon',
             url: '/new-group/new-menu',
           },
           ...
         ],
       },
     ];

     In the nutshell, You just have to add an object in order to array a new menu. The object contains a property named 'type' which can have three values i.e. 'group', 'collapse', and 'item'. You just have to pass the correct value to this 'type' property as per the type of menu you want to add. All other properties in the object remain the same

2. In the second step you need to add route in your app. To add route in your next app you need to follow the following steps. If you want to add a new route name new-page then you need to create a file in page directory and follow the further steps written below. In the Nextjs app we have two types of route. One is protected and second in public routes. You can add them like below.

   • Public Routes: To add public routes you need to wrap your components in the following wrapper like below

     import React from 'react';
     import AppPage from '../@crema/hoc/DefaultPage/index';
     import asyncComponent from '../@crema/utility/asyncComponent';
     
     const NewPage= asyncComponent(() => import('YOUR_COMPONENT_PATH'));
     export default AppPage(() => <NewPage/>);
     

   • Protected Routes: To add protected routes you need to wrap your components in the following wrapper like below

     import React from 'react';
     import AppPage from '../../../@crema/hoc/AppPage';
     import asyncComponent from '../../../@crema/utility/asyncComponent';
     
     const NewPage= asyncComponent(() => import('YOUR_COMPONENT_PATH'));
     export default AppPage(() => <NewPage/>);