Skip to main content

v3.1.0 to v4.0.0

To ensure a smooth migration from version 3.1.0 to 4.0.0, please follow these steps carefully. We recommend starting by comparing your package.json file with the template’s package.json file and updating all dependencies accordingly.

Middleware​

In this release, we have removed the src/middleware.ts file. Let us understand why we have done this.

We had written all the logic for Authentication and Translation in the src/middleware.ts file. Next.js suggests to create a middleware file for both the logics (you may refer the same from here for Translation and here for Authentication) and we did exactly the same.

After doing this, we had deployed our demos on Vercel. After sometime we realized that on Vercel, there were too many Edge Middleware Invocations. This was because the middleware was being invoked on every request. This was not the expected behavior. We further realized that many of our users might face the same issue and for no reason, they might have to pay more for the same.

So, we decided to remove the middleware and wrote all the logic in the respective HOCs. This way, the logic will only be invoked when the respective component is rendered. We have created three HOCs for the same and can be found in the src/hocs folder. The HOCs are as follows:

  1. AuthGuard: This HOC will check if the user is authenticated or not. If the user is not authenticated, it will redirect the user to the login page. If you are visiting any protected route, you will be redirected to the login page
  2. GuestOnlyRoute: This HOC will check if the user is authenticated or not. If the user is authenticated, it will redirect the user to the dashboard page. If you are visiting any guest-only route (such as the login page), you will be redirected to the dashboard page
  3. TranslationWrapper: This HOC will check whether there is any language in the current URL. If not, it will redirect the user to the same URL with the default language.

Please refer here for migrating the Authentication and here for migrating the Translation.

We've made a couple of changes to how we handle the home page URL. The HOME_PAGE_URL variable has been moved from the src/middleware.ts file to the src/configs/themeConfig.ts file and renamed to homePageUrl. Additionally, the home page URL (/dashboards/crm) is now also written in the next.config.mjs file. If you need to update the home page URL, please remember to change it in both files.

Folder Structure Changes​

We have made changes to the folder structure, including the introduction of public routes, private routes, and guest-only routes, along with HOCs for user authorization. For instance, guest-only routes are for pages like Login, Registration, and Forgot Password, accessible only to unauthenticated users.

For example, dashboard pages are considered as private page which are accessible only to authenticated users. So we have moved the dashboard pages to the (private) folder and Login, Register, Forgot Password pages to the (guest-only) folder. Front pages are accessible to all users, so they are kept in the root folder which means public routes.

For more details, refer to this link so that you can bifurcate your routes accordingly.

Authentication​

We have made changes to the authentication process, including the introduction of HOCs and removed the middleware file. To migrate:

  1. Create (private) folder in the (dashboard) folder and move all the content from the src/app/[lang]/(dashboard) folder to the src/app/[lang]/(dashboard)/(private) folder.

  2. Create (guest-only) folder in the (blank-layout-pages) folder and move the Login, Register, and Forgot Password pages to the src/app/[lang]/(blank-layout-pages)/(guest-only) folder.

  3. Copy the following files from the template to your project:

    • src/hocs/AuthGuard.tsx
    • src/hocs/GuestOnlyRoute.tsx
    • src/components/AuthRedirect.tsx
    • src/app/[lang]/(blank-layout-pages)/(guest-only)/layout.tsx

  4. Wrap your src/app/[lang]/(dashboard)/(private)/layout.tsx file with the AuthGuard component as shown below:

    const Layout = async ({ children, params }: ChildrenType & { params: { lang: Locale } }) => {
      return (
        ...
        <AuthGuard>
          <html {/* other props */}>
            ...
          </html>
        </AuthGuard>
        ...
      )
    }

    export default Layout

You may refer to this link for more information on securing pages.

Translation (i18n)​

We have removed the translation logic from the middleware file as the src/middleware.ts file has been removed from the template. To migrate:

  1. Copy the src/hocs/TranslationWrapper.tsx and src/components/LangRedirect.tsx files from the template to your project.

  2. Wrap your src/app/[lang]/layout.tsx file with the TranslationWrapper component as shown below:

    const RootLayout = ({ children, params }: ChildrenType & { params: { lang: Locale } }) => {
      return (
        <TranslationWrapper {/* other props */}>
          <html {/* other props */}>
            ...
          </html>
        </TranslationWrapper>
      )
    }

    export default RootLayout

Search Library Update​

In this update, we have replaced the kbar search library with the cmdk search library because cmdk provides timely package updates, whereas kbar has not been updated for a long time and also console warnings appears. Since cmdk is a completely new library, a direct upgrade is not possible.

Steps to Migrate:

  1. Replace your src/components/layout/shared/search folder with the template's src/components/layout/shared/search folder.

  2. Replace your src/data/searchData.ts file with the template's src/data/searchData.ts file.

Redux Store​

We have introduced redux store. To migrate:

  1. Copy the src/redux-store folder from the template to your project.

  2. Wrap your app with the ReduxProvider component in the src/components/Providers.tsx file as shown below:

    const Providers = () => {
      return (
        ...
        <ReduxProvider>{children}</ReduxProvider>
        ...
      )
    }

    export default Providers

Calendar App​

The calendar app has been rebuilt using redux, replacing the old useReducer() implementation. Manual changes to each file is not possible and thus, the entire calendar app must be replaced with the new version.

Steps to Migrate:

  1. Replace your src/views/apps/calendar folder with the template's src/views/apps/calendar folder.

  2. Replace your src/fake-db/apps/calendar folder with the template's src/fake-db/apps/calendar folder.

  3. Add the redux store for the calendar, found in src/redux-store. Do not forget to copy the src/redux-store/slices/calendar.ts file.

exactMatch and activeUrl​

In this update, we have introduced the exactMatch and activeUrl props to make a menu item active based on the current dynamic URL. You may refer to this for verticalMenu and this for horizontalMenu.

Exclude Lang​

In this update, we introduced the excludeLang prop for greater flexibility in URL localization for dynamic menus and search. This prop allows you to exclude specific URLs from localization, making it easier to manage menu and search items that should not be translated.

Steps to Migrate:

  • For menuData files:

    1. Locate your dynamic menu configuration file (verticalMenuData.tsx or horizontalMenuData.tsx) in the src/data/navigation folder.

    2. Replace your src/types/menuTypes.ts file with the template's src/types/menuTypes.ts file.

    3. Add the excludeLang : true prop to the menu items that should not be localized.

    We have added the excludeLang prop for the front-pages. You may refer to below example:

     {
       label: dictionary['navigation'].landing,
       href: '/front-pages/landing-page',
       target: '_blank',
       excludeLang: true
     }

  • For searchData file:

    1. Locate src/data/searchData.ts file.

    2. Add excludeLang?: boolean in the SearchData type.

    3. Add the excludeLang prop to the search items that should not be localized.

    We have added the excludeLang prop for the front-pages. You may refer to below example:

    {
      id: '1',
      name: 'Landing Front',
      url: '/front-pages/landing-page',
      excludeLang: true,
      icon: 'ri-article-line',
      section: 'Front Pages'
    }

For detailed examples and more information on using excludeLang, refer to the Vertical Menu and Horizontal Menu documentation.

Logo Component​

In this update, we have removed the Link component from the Logo component. To migrate:

  1. Replace your src/components/layout/shared/Logo.tsx file with the src/components/layout/shared/Logo.tsx file from the template.

  2. Ensure that you remove any occurrences of the component prop associated with the Logo component.

If you require the Logo to function as a link, wrap it with the Link component from next/Link to achieve the desired redirection.