React + Typescript에 i18n 적용

npm i i18next react-i18next

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import ko from './locales/ko';
import en from './locales/en';

export const resources = {
  ko: {
    translation: ko,
  },
  en: {
    translation: en,
  },
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'ko',
  fallbackLng: 'ko',
  debug: true,
  keySeparator: '.', // default value
  interpolation: {
    escapeValue: false,
  },
  returnObjects: true,
});

export default i18n;

// import the original type declarations
import 'react-i18next';
// import all namespaces (for the default language, only)
import { resources } from './i18n';

declare module 'react-i18next' {
  type DefaultResources = typeof resources['ko'] & typeof resources['en'];
  interface Resources extends DefaultResources {}
}

// ko 예시
const lang = {
  name: 'ZungTa',
};
export default lang;

...
import '@/config/lang/i18n';
...

...
import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();

  return (
    <div css={appCss}>
      Hello {t('name')}
    </div>
  );
}

export default App;