Gloddy - 다국어 지원

오늘 한 일

• gloddy 개발
  • 페이지 애니메이션 구현
  • 더보기 버튼 클릭 시 바텀시트 띄우기
  • i18n 세팅
• 블로그 allMdx 오류 수정

Gloddy

이제 QA 한 것들을 거의 다 반영한 것 같다.

다국어 지원

i18n을 사용하여 다국어 지원을 했다.

next-i18next 라이브러리를 사용하려고 했는데 next 13 App dir에서는 지원하지 않는다고 한다..

그래서 이 글을 보면서 직접 세팅했다.

서버 컴포넌트에서 사용하는 방법

import Link from 'next/link'
import { serverTranslation } from '../i18n'

export default async function Page({ params: { lng } }) {
  const { t } = await serverTranslation(lng)
  return (
    <>
      <h1>{t('title')}</h1>
      <Link href={`/${lng}/second-page`}>{t('to-second-page')}</Link>
    </>
  )
}

클라이언트 컴포넌트에서 사용하는 방법

'use client'

import Link from 'next/link'
import { useTranslation } from '../../i18n/client'
import { Footer } from '../components/Footer/client'
import { useState } from 'react'

export default function Page({ params: { lng } }) {
  const { t } = useTranslation(lng, 'client-page')
  const [counter, setCounter] = useState(0)
  return (
    <>
      <h1>{t('title')}</h1>
      <p>{t('counter', { count: counter })}</p>
      <div>
        <button onClick={() => setCounter(Math.max(0, counter - 1))}>-</button>
        <button onClick={() => setCounter(Math.min(10, counter + 1))}>+</button>
      </div>
      <Link href={`/${lng}`}>
        <button type="button">{t('back-to-home')}</button>
      </Link>
      <Footer lng={lng} />
    </>
  )
}

내일 할 일

• gloddy 개발
  • 다국어 적용
  • 테일윈드 SSR 시 스타일 깨지는 문제 해결
• 7시 GDSC 회의