[Next.js] i18n/ i18next 국제화 작업/ 다국어 지원 페이지 만들기/ with 리액트, 타입스크립트

 

 

개요

i18n

https://ko.wikipedia.org/wiki/%EA%B5%AD%EC%A0%9C%ED%99%94%EC%99%80_%EC%A7%80%EC%97%AD%ED%99%94

i18next

i18next is an internationalization-framework written in and for JavaScript. (https://www.i18next.com/)

i18n은 국제화를 통틀어 칭하는 표현이고,

i18next는 우리가 사용할 국제화 프레임워크를 뜻한다.

이 프레임워크를 이용하여 다국어 지원이 가능한 페이지를 만들 수 있다.

 

 

설치

작업환경

React.js 18.2.0

Next.js 13.0.0

Typescript 4.8.4

 

명령어

npm i next-i18next

 

 

세팅

// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: "ko",
    locales: ["en", "ko"],
  },
};

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

 

json 파일 생성

public/locales/en/common.json
public/locales/ko/common.json

 

common.json이 없으면 next-i18next는 Default namespace Not Found라는 에러가 뜰 수 있음

 

 

적용

// _app.js
import { appWithTranslation } from "next-i18next";

function App({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}
export default appWithTranslation(App)

// pages/index.js

import { serverSideTranslations } from "next-i18next/serverSideTranslations";

...

export const getStaticProps = async ({ locale }: GetStaticPropsContext) => ({
  props: {
    ...(await serverSideTranslations(locale as string, ["common", "about"])),
  },
});

 

오류

Initial locale argument was not passed into serverSideTranslations.

 

Initial locale argument was not passed into serverSideTranslations.

이게 대체 무슨 말인가 하고 엄청 헤맸는데, 아주 간단한 오류였다.

 

 

수정

수정 전

// next.config.js

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ["www.notion.so", "i.ibb.co"],
  },
};
module.exports = nextConfig;

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

 

수정 후

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

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ["www.notion.so", "i.ibb.co"],
  },
  i18n,
};

module.exports = nextConfig;

 

기존에 노션 API를 연결하면서 nextConfig에 정의된 내용으로 이미 모듈 exports를 시켜놓고

다시 i18n을 불러왔기에 무효처리 되었던 것.

상단에 i18n을 정의해주고 nextConfig 안에 넣어주니 제대로 작동했다.

이래서 그냥 복붙만 하면 안 되고 내 코드에 맞게 재수정하는 작업이 꼭 필요하다!!