Next i18n 적용하기

https://www.npmjs.com/package/next-i18next

next-i18next

 

1. 그대로 따라하면 된다!!

2. 주의할 점은, 페이지 level에서 getStaticProps를 추가하면, 해당 파일에서는 useTranslation을 사용하지 못한다는 점이다.

3. useTranslation을 매 파일마다 import해서 쓰기 귀찮으니까, custom hook을 하나 만들어줬다.

 

// use-t.ts
import { useTranslation } from "next-i18next";

export const useT = () => {
  const result = useTranslation("common");

  return {
    ...result,
  };
};

// usage
export default function Category(props) {
  const { t } = useT();

  return (
      ...
      <Typography.P14_Bold
        content={t("loot_box")}
        color={...}
      />
      ...
	
  )
}