Back to Sealos

I18n

frontend/i18n.md

5.1.12.0 KB
Original Source

I18N

Install i18n-ally Plugin

  1. Open the Extensions Marketplace in VSCode, search for and install the i18n Ally plugin.

Code Optimization Examples

Fetch Specific Namespace Translations in getServerSideProps

typescript
// pages/yourPage.tsx
export async function getServerSideProps(context: any) {
  return {
    props: {
      currentTab: context?.query?.currentTab || TabEnum.info,
      ...(await serverSideTranslations(context.locale, ['publish', 'user']))
    }
  };
}

Use useTranslation Hook in Page

typescript
// pages/yourPage.tsx
import { useTranslation } from 'next-i18next';

const YourComponent = () => {
  const { t } = useTranslation();

  return (
    <Button variant="outline" size="sm" mr={2} onClick={() => setShowSelected(false)}>
      {t('common:close')}
    </Button>
  );
};

export default YourComponent;

Handle Static File Translations

typescript
// utils/i18n.ts
import { i18nT } from '@packages/i18n/utils';

const staticContent = {
  id: 'simpleChat',
  avatar: 'core/workflow/template/aiChat',
  name: i18nT('app:template.simple_robot')
};

export default staticContent;

Standardize Translation Format

  • Use the t(namespace:key) format to ensure consistent naming.
  • Translation keys should use lowercase letters and underscores, e.g., common.close.

Translation File Paths