next 위에서 i18next 적용하기

react에서의 i18next는 이쪽 참조

https://jineecode.tistory.com/211

react 위에서 i18next 적용하기

 

---

1. 설치

npm install next-i18next

 

2. 폴더 구조 (public 위치에 있음을 유의)

.
└── public
    └── locales
        ├── en
        |   └── common.json
        └── ko
            └── common.json

 

2-1) common.json 예시

// public/locales/en/common.json

{
  "something": {
      "example1": "for example, this is 18next",
   }
 }

// public/locales/ko/common.json

{
  "something": {
      "example1": "예를 들어 이렇게 합니다",
   }
 }

참조: json을 이렇게 나눠놓으면 파일 여러개를 따로 관리하지 않고 하나의 파일에서 관리할 수 있음.

 

 

3. 루트 디렉토리에서 next-i18next.config.js 파일 생성

// next-i18next.config.js

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

 

4. 루트 디렉토리에서  next.config.js 파일 생성 

// next.config.js

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

module.exports = {
  i18n,
};

 

5. _app.js 에 적용

// _app.js

import { appWithTranslation } from "next-i18next";

const MyApp = ({ Component, pageProps }) => <Component {...pageProps} />;

export default appWithTranslation(MyApp);

 

6. 다국어를 적용할 파일에서의 설정

// pages/something.js

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

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

const Something = () => {
	const { t } = useTranslation("common");
    
     return (
     	<>
        	{t("something.example1")}
        </>
     )
}

export default Something;

 

이제 이런 식으로 다국어 처리가 될 것임.

 

http://localhost:3000/en/something

http://localhost:3000/ko/something

 

 

참고:

https://minhanpark.github.io/today-i-learned/next-i18next/

Next app에 다국어 적용하기