[Next] i18n 설치 및 설정

prerequisite

  • nextjs v12

참고

next-i18next

설치

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)

디지엠유닛원 주식회사

  • 대표이사 권혁태
  • 개인정보보호책임자 정경영
  • 사업자등록번호 252-86-01619
  • 주소
    서울특별시 금천구 가산디지털1로 83, 6층 601호(가산동, 파트너스타워)
  • 이메일 web@dgmit.com