Remove Internationalization

Remove i18n

VITE (TS)

1. Update App.tsx

   Open src\App.tsx and remove the Locales provider.

src/App.tsx

'use client';

import { ReactElement } from 'react';

// next
import { SessionProvider } from 'next-auth/react';

// project imports
import ThemeCustomization from 'themes';

// ❌ Removed Locales import
// import Locales from 'components/Locales';

import ScrollTop from 'components/ScrollTop';
import RTLLayout from 'components/RTLLayout';
import Snackbar from 'components/@extended/Snackbar';
import Notistack from 'components/third-party/Notistack';

import { ConfigProvider } from 'contexts/ConfigContext';

// ==============================|| APP - THEME, ROUTER, LOCAL ||============================== //

export default function ProviderWrapper({ children }: { children: ReactElement }) {
  return (
    <ConfigProvider>
      <ThemeCustomization>
        <RTLLayout>
          {/* <Locales> */}
            <ScrollTop>
              <SessionProvider refetchInterval={0}>
                <Notistack>
                  <Snackbar />
                  {children}
                </Notistack>
              </SessionProvider>
            </ScrollTop>
          {/* </Locales> */}
        </RTLLayout>
      </ThemeCustomization>
    </ConfigProvider>
  );
}

1. Delete Unused Files

   Remove the following files completely:

   • src/components/Locales.tsx

   • src/utils/locales/ (entire folder)

2. Clean Up Components Using FormattedMessage

   Some components use react-intl for text rendering (like Breadcrumbs, NavGroup, NavItem, etc.). Replace FormattedMessage with plain strings:

   Example: src/components/@extended/Breadcrumbs.tsx

Before :

....
// third-party
import { FormattedMessage } from 'react-intl';
...

export default function Breadcrumbs({

  <Typography
        {...(main.url && { component: Link, to: main.url as string })}
        variant={window.location.pathname === main.url ? 'subtitle1' : 'h6'}
        sx={{ textDecoration: 'none' }}
        color={window.location.pathname === main.url ? 'text.primary' : 'text.secondary'}
      >
        {icons && <CollapseIcon style={iconSX} />}
          <FormattedMessage id={main?.title as string} />
        {main?.title}
  </Typography>

After:

....
// third-party
// import { FormattedMessage } from 'react-intl';
...

export default function Breadcrumbs({

  <Typography
        {...(main.url && { component: Link, to: main.url as string })}
        variant={window.location.pathname === main.url ? 'subtitle1' : 'h6'}
        sx={{ textDecoration: 'none' }}
        color={window.location.pathname === main.url ? 'text.primary' : 'text.secondary'}
      >
        {icons && <CollapseIcon style={iconSX} />}
          {main?.title}
        {main?.title}
  </Typography>

Repeat the same cleanup in:

• src/layout/Component/Drawer/Navigation/NavGroup.tsx

• src/layout/Component/Drawer/Navigation/NavItem.tsx

• src/layout/Dashboard/Drawer/DrawerContent/Navigation/NavCollapse.tsx

• src/layout/Dashboard/Drawer/DrawerContent/Navigation/NavGroup.tsx

• src/layout/Dashboard/Drawer/DrawerContent/Navigation/NavItem.tsx

VITE (JS)

NEXT (TS)

NEXT (JS)