# 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.<br>
   * &#x20;Go to the file with the path: -

     ```
     src/modules/routesConfig.js
     ```

   * &#x20;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-

     ```javascript
     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.

     ```javascript
     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',
           },
           ...
         ],
       },
     ];
     ```

   * &#x20;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:-

     ```javascript
     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.

     ```javascript
     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\ <br>
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.<br>

   * 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/>);

     ```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cremawork.com/v-3/next-js/add-new-route.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.