[Next] i18n 설치 및 설정

2022.07.07Woogie.Kim

prerequisite

nextjs v12

참고

설치

npm i next-i18next

설정

next-i18next.config.js

i18n 환경설정
자세한 내용은 상단 참고링크에서

module.exports = {
  i18n: {
    defaultLocale: "ko",
    locales: ["ko", "en"],
  },
};

next.config.js

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

const nextConfig = {
  reactStrictMode: true,
  i18n,
};

module.exports = nextConfig;

pages/_app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { appWithTranslation } from "next-i18next";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

라우팅되는 파일에 아래 코드 추가

ex) pages/customer/manage/index.tsx
하위 컴포넌트에는 추가할 필요 없음

export async function getStaticProps({ locale }: any) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common", "sample"])),
    },
  };
}
``
<br/>

### 폴더
* public 폴더 밑으로 locales 폴더 생성 및 다국어 적용을 위한 폴더 생성 (ex. public/locales/ko)