Next.js 프레임워크를 사용할 때 다국어 지원에 관한 내용을 정리한 포스팅입니다.

 
 

## 🤔 다국어 지원 개념

웹사이트에서 다국어를 지원하기 위해서는 사용자가 선택한 나라의 정보를 가지고 있어야합니다.

일반적인 웹사이트에서는 나라 정보를 URL에서 확일 할 수 있도록 path에 포함합니다.

 

>예시
```
https://chanstory.dev/kr
https://chanstory.dev/en
```


 

그리고 선택한 나라의 언어를 지원하기 위해 페이지에 렌더링해야하는 텍스트 정보들을 모두 객체로 관리해야 합니다.

한국어, 영어를 지원하는 navbar를 만들어 예시로 들어보겠습니다.

 

```jsx
<nav>
 <ul>
 <li>홈</li>
 <li>블로그</li>
 <li>갤러리</li>
 <li>마이 페이지</li>
 </ul>
</nav>
```


 

위에서 작성한 nav 요소에 다국어 지원을 하기 위해 프로젝트에 지원 언어별 폴더와 텍스트가 있는 json 파일을 생성해야합니다.

특정 경로에 "kr", "en" 라는 이름의 폴더를 만들고 세 폴더 모두 nav.json 이라는 파일을 추가합니다.

nav.json의 값은 아래와 같습니다.

 

> en/nav.json
```js
{
 "home": "HOME",
 "blog": "BLOG",
 "gallery": "GALLERY",
 "my page": "MY PAGE", 
}
```

 

> kr/nav.json
```js
{
 "home": "홈",
 "blog": "블로그",
 "gallery": "갤러리",
 "my page": "마이 페이지", 
}
```

 

json 파일까지 만들었다면 프로젝트에서 사용자가 선택한 나라의 언어 폴더에 있는 nav.json 파일을 불러와 사용해주면 다국어 지원 기능 제작이 완성됩니다.

 

```jsx
<nav>
 <ul>
 <li>{nav.home}</li>
 <li>{nav.blog}</li>
 <li>{nav.gallery}</li>
 <li>{nav.my page}</li>
 </ul>
</nav>
```



 
 

## ⚙ 다국어 지원을 위한 Next.js 세팅
Next.js 프로젝트에서는 [next-i18next](https://github.com/i18next/next-i18next) 라이브러리를 활용해 쉽게 다국어를 지원할 수 있습니다.

 

먼저 next-i18next 라이브러리를 설치합니다.

```
npm i next-i18next
yarn add next-i18next
```


 

설치가 완료되었으면 프로젝트의 루트경로에 `next-i18next.config.js` 파일을 만들고 지원할 언어를 설정해줍니다.
> next-i18next.config.js
```js
module.exports = {
 i18n: {
 defaultLocale: 'kr',
 locales: ['kr', 'en'],
 },
}
```


 

설정을 완료하면 `next.config.js`에 추가해주세요.
> next.config.js
```js
const { i18n } = require('./next-i18next.config')

module.exports = {
 i18n,
}
```


 

마지막으로 _app.js에서 MyApp 컴포넌트를 next-i18next의 appWithTranslation 함수로 감싸 주시면 사용할 준비가 완료됩니다.

```jsx
import { appWithTranslation } from 'next-i18next'

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

export default appWithTranslation(MyApp)
```



 
 

## 🎈 Next.js 프로젝트에서 다국어 지원하기
먼저 지원할 언어의 Text 데이터가 담긴 json 파일을 라이브러리에서 불러올 수 있도록 public/locales 경로에 만들어주세요.

```
└── public
 └── locales
 ├── kr
 | └── nav.json
 └── en
 └── nav.json
```

 

json 파일을 생성했다면 사용하고 싶은 페이지에서 라이브러리에서 제공하는 함수를 이용해 불러올 수 있습니다.
저는 SSR을 사용하기 때문에 serverSideTranslations를 이용해서 구현했습니다.

```jsx
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

const Navbar = ({nav}) => {
 return(
 <nav>
 <ul>
 <li>{nav.home}</li>
 <li>{nav.blog}</li>
 <li>{nav.gallery}</li>
 <li>{nav.my page}</li>
 </ul>
 </nav>
 )
}

export async function getStaticProps({ locale }) {
 // 배열에 json 파일명을 입력해여 여러개의 json 파일을 불러올 수 있습니다.
 const translation = await serverSideTranslations(locale, ["nav"])
 const { nav } = translation._nextI18Next!.initialI18nStore[locale]
 
 return {
 props: {
 nav
 },
 }
}

export default Navbar
```

 

이렇게 다국어 지원 페이지가 완성되었습니다.
한국어를 사용중인데 영문 페이지로 변경하는 기능이 필요하다면 버튼에 아래와 같이 라우팅 처리를 해주시면 됩니다.
```js
const changeLocale = (selectLocale // "kr", "en") => {
 router.push(
 { pathname: router.pathname, query: router.query },
 router.asPath,
 {
 locale: selectLocale,
 }
 );
};
```

Next.js 프레임워크를 사용할 때 다국어 지원에 관한 내용을 정리한 포스팅입니다.

 
 

## 🤔 다국어 지원 개념

웹사이트에서 다국어를 지원하기 위해서는 사용자가 선택한 나라의 정보