i18n nextjs

i18n setting with Next

---

다국어 설정을 위한 Setting

설치

• npm i next-i18next

필요한 설정파일

• next.config.js

  const { i18n } = require("./next-i18next.config");
  
  module.exports = {
    i18n,
  };

• next-i18next.config.js

  const path = require("path");
  
  module.exports = {
    i18n: {
      locales: ["en", "ko"],
      defaultLocale: "ko",
    },
  };
  

• public/locales

  • en/[file].json
  • ko/[file].json

Wrap app component

import { appWithTranslation } from "next-i18next";

function MyApp({ Component, pageProps }: AppProps) {
  return (
          <Component {...pageProps} />
  );
}
export default wrapper.withRedux(appWithTranslation(MyApp));

사용

//page
export const getServerSideProps = async ({ locale }: any) => {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"])),
    },
  };
};

//component
const { t } = useTranslation();
...
<StateIconBox
  state={CalculationState.FINISHED}
  stateText={t("cal.result.statement.done")}
/>

• [lan]/[file].json 의 객체를 t함수안에 지정하면 된다 - 사용법은 조금만 검색해도 수두룩하게 나옴
• page레벨에서 get*Props 함수로 setting해주어야한다.
• 동적인지, 정적라우팅인지에 따라 호출할 함수를 결정하여 사용해준다.

이슈

• vercel을 통해 배포하던중 i18n을 적용한 페이지단위에 접속하면 500error이 발생했다.
• network탭엔 해당 page에 대한 get요청이 실패했다고만 나와서 정확한 이슈를 알 수 없었음.
• getServerSideProps, getStaticProps를 사용하고 fs모듈을 block하는 코드도 작성했음
• 이 과정에서 동적라우팅에선 getServerSideProps를 사용해야 에러가 발생하지 않음을 확인 - fs는 이슈가 되지 않음 -> block 코드 제거
• vercel의 view function log 확인 -> locales 경로를 확인할 수 없다는 에러로그 확인
• i18next github issue에서 같은 이슈, 답변 일일히 확인
• 참고링크 - locale폴더를 상대경로를 통해 지정해주어서 해결함.

• 간단하게 생각했으나 SSR을 끼얹으니 작은 이슈를 해결하는데 상당히 번거롭다.
• 확실히 local - vercel two ch에서의 확인이 주기적으로 필요한 것 같다. -어딘되고 어딘 안되고,,