[Dev Log] Next.js 14 + next-intl로 글로벌 서비스 준비하기 🌍

왜 다국어 처리가 필요한가요?

서비스의 글로벌 확장을 위해 다국어 지원은 필수적입니다. 이번 프로젝트에서는 Next.js 14 App Router 환경에서 가장 널리 사용되고 있는next-intl 라이브러리를 도입하여 다국어 처리를 구현했습니다.

1. next-intl 설치 및 설정

pnpm install next-intl

미들웨어를 설정하여 사용자의 언어 설정을 감지하고 적절한 경로로 리다이렉트합니다.

2. 컴포넌트 구조 변경

기존의 app/page.tsx 등을 app/[locale]/page.tsx 로 이동하여 동적 라우팅을 적용했습니다.

3. 언어 변경 토글 (Language Toggle)

shadcn/ui의 DropdownMenu를 활용하여 직관적인 언어 변경 기능을 구현했습니다.

💡 💡 Tip: usePathname과 useRouter 훅을 사용하여 현재 경로를 유지하면서 언어 prefix만 변경하는 것이 핵심입니다.

마무리

이제 /en 경로로 접속하면 영어 페이지가, /ko 경로로 접속하면 한국어 페이지가 렌더링됩니다. 글로벌 서비스를 위한 첫 걸음을 성공적으로 내디뎠습니다! 🚀