Next.js - 블로그 다국어(i18n)로 만들기 Part 1

개요

해당 블로그를 기본 언어는 한국어로, 원하는 몇개의 콘텐츠는 영어로도 추가로 작성하고 싶습니다.

참고로, 이 블로그는 Tailwind CSS Blog Starter 템플릿 코드를 기반으로 작성되었습니다.
(저는 Pages Route 기반으로 된 코드일 때 받았는데, 지금은 App Route 기반으로 변경되어 있네요.)

내용이 길어져 Part 1 ~ 4 로 나누어서 작성합니다.

Part 1에서는 next-i18next 라이브러리를 사용하여 사이트에 다국어를 적용합니다. (개별 글에 대한 다국어 처리는 Part 2에서 다룹니다.)

gitHub, i18n-tailwind-nextjs-starter-blog를 참고하여 만들었습니다.

Tailwind CSS Blog Starter 템플릿 사용을 결정하셨고, 프로젝트를 처음 시작한다면 위 프로젝트로 시작하는 것도 좋을 것 같습니다.

제 경우 이미 프로젝트가 진행 중이라서, 위 프로젝트를 참고하여 진행했습니다.

next-i18next

우선 블로그 글(md/mdx)들을 다국어로 가져오는 것과는 별개로, 오류 문구 등 설정된 언어에 맞는 언어 표시를 위해 next-i18next 라이브러리를 사용합니다.

번역이 필요 없으시다면 이번 Part는 넘기고 Next.js의 기본 i18n만 설정(next.config.js)해서 사용하셔도 됩니다.

설치

next-i18next에서 자세한 설치 및 설정 방법을 확인할 수 있습니다.

먼저, 아래 명령어를 입력하여 설치합니다.

npm install next-i18next react-i18next i18next

번역 파일 추가

public 폴더 하위에 locales 폴더를 생성합니다.
locales 폴더 하위에 en과 ko 폴더를 생성합니다.
public/locales/en/common.json 파일을 생성하고 아래와 같이 작성합니다.

{
  "all": "All Posts"
}

public/locales/ko/common.json 파일을 생성하고 아래와 같이 작성합니다.

{
  "all": "전체 글"
}

로컬 실행 중 key/value 추가 시 재실행 없이는 추가된 값은 못 읽어왔습니다. 참고하세요.

프로젝트 설정

최상위 폴더에 next-i18next.config.js 파일을 생성하고 원하는 언어 설정을 추가합니다.
(저는 아래와 같이 기본 언어는 한국어로, 제공 언어는 한국어와 영어로 설정했습니다.)

/** @type {import('next-i18next').UserConfig} */
module.exports = {
    i18n: {
        defaultLocale: 'ko',
        locales: ['ko', 'en']
    }
}

next.config.js 파일을 열어서 i18n 설정을 추가합니다. (재실행이 필요합니다.)

const { i18n } = require('./next-i18next.config') // 추가

// ...

module.exports = withBundleAnalyzer({
  i18n, // 추가
  reactStrictMode: true,
  // ...
})

pages/_app.js 파일을 열어서 appWithTranslation을 추가합니다.

import { appWithTranslation } from 'next-i18next'  // 추가

function App({ Component, pageProps }) { // export default 제거
  // ...
}

export default appWithTranslation(App) // appWithTranslation 추가

설정은 끝났습니다. 이제 정상적으로 동작하는 지 확인을 할 차례입니다.

locale 동작 확인

http://localhost:3000/en 으로 접속이 되는 것을 확인합니다. (번역 적용은 아직이기 떄문에 페이지 변화는 없습니다.)

언어에 맞게 표시

Blog 페이지의 All Posts를 번역된 값으로 표시되도록 수정해보겠습니다.

pages/blog.js 수정

// ...
import { serverSideTranslations } from 'next-i18next/serverSideTranslations' // 추가
import { useTranslation } from 'next-i18next' // 추가

// ...

export async function getStaticProps({ locale }) { // { locale } 추가
  // ...

  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])), // 추가
      // ...
    },
  }
}

export default function Blog({ posts, initialDisplayPosts, pagination }) {
  const { t } = useTranslation('common') // 추가

  return (
    <>
      // ...
      <ListLayout
        // ...
        title={t('all')} // 언어에 맞는 번역 가져오기
      />
    </>
  )
}

http://localhost:3000/blog 로 접속하면, 전체 글로 표시되는 것을 확인할 수 있습니다.
http://localhost:3000/en/blog 로 접속하면, All Posts로 표시되는 것을 확인할 수 있습니다.

✔ next-i18next 설치 과정에서 설치, 삭제, 다른 라이브러리 설치 및 삭제, 다시 next-i18next 설치를 반복하다보니 꼬였었나 봅니다. 안 될 이유가 없는데 번역 파일을 못 읽어왔습니다. 결국은 node_modules 폴더를 삭제 후 재설치하니 정상 동작했습니다.

언어 변경 Link 추가

이제 아래 이미지와 같이 언어 변경을 쉽게 해줄 링크를 추가하겠습니다.

언어 변경 컴포넌트 추가

components/LanguageSwitch.js 파일을 생성하고 아래와 같이 작성합니다.

import { useRouter } from 'next/router'
import Link from 'next/link'

const LanguageSwitch = () => {
  const { locales, locale, asPath } = useRouter()

  if (!locales) {
    return null
  }

  return (
    <div className="rounded bg-gray-200 py-2 dark:bg-gray-800">
      {locales.map((item) => (
        <Link key={item} locale={item} href={asPath}>
          <a
            className={`p-2 font-medium text-gray-900 dark:text-gray-100 ${
              item === locale ? 'rounded bg-gray-400 dark:bg-gray-600' : ''
            }`}
          >
            {item}
          </a>
        </Link>
      ))}
    </div>
  )
}

export default LanguageSwitch

언어 변경 컴포넌트 적용

components/LayoutWrapper.js > LanguageSwitch 컴포넌트 사용

import LanguageSwitch from '@/components/LanguageSwitch' // 추가

const LayoutWrapper = ({ children }) => {
  return (
    <SectionContainer>
      <div className="...">
        <header className="...">
          // ...
          <div className="...">
            // ...
            <LanguageSwitch /> // 추가
            <ThemeSwitch />
            <MobileNav />
          </div>
        </header>
      </div>
    </SectionContainer>
  )
}