다국어 지원이란? 🤔
다국어 지원(i18n, Internationalization)은 웹 애플리케이션에서 여러 언어로 콘텐츠를 제공하여 다양한 사용자에게 접근성을 높이는 기능임. Next.js는 기본적으로 i18n을 위한 설정과 다양한 플러그인, 라이브러리와의 호환성을 제공하여 언어별 콘텐츠와 로케일 기반의 경로 설정을 지원함. Next.js에서 다국어를 지원하면 글로벌 사용자에게 더 나은 경험을 제공할 수 있음.
Next.js에서 다국어 지원의 이점 🌟
- 더 많은 사용자 접근 가능: 다양한 언어를 지원하여 웹사이트의 접근성을 높임.
- SEO 최적화: 언어별로 구분된 경로를 생성하여 검색 엔진에 더 잘 노출될 수 있음.
- 고객 경험 향상: 사용자에게 친숙한 언어로 웹사이트를 제공함으로써 긍정적인 사용자 경험을 제공할 수 있음.
Next.js i18n 설정 🔧
Next.js에서는 기본적으로 로케일 기반의 라우팅(i18n routing)을 지원하여, 언어별 경로를 쉽게 설정할 수 있음.
next.config.js에 i18n 설정 추가
Next.js 프로젝트의 next.config.js 파일에 i18n 설정을 추가하여, 사용할 로케일과 기본 언어를 지정할 수 있음.
// next.config.js
module.exports = {
i18n: {
locales: ["en", "ko", "fr"], // 지원하는 언어 목록
defaultLocale: "en", // 기본 언어
},
};번역 파일 구성 📂
다국어 지원을 위해서는 각 언어에 맞는 번역 파일을 준비해야 함. 일반적으로 JSON 형식의 번역 파일을 작성하여, 각 언어별로 표현할 텍스트를 저장함.
번역 파일 생성
프로젝트의 루트 디렉토리에 locales 폴더를 생성하고, 언어별로 파일을 작성함. 예를 들어, locales/en.json과 locales/ko.json 파일을 생성하여 각 언어의 텍스트를 정의할 수 있음.
// locales/en.json
{
"greeting": "Hello, welcome to our website!",
"description": "This is a website built with Next.js."
}
// locales/ko.json
{
"greeting": "안녕하세요, 저희 웹사이트에 오신 것을 환영합니다!",
"description": "이 웹사이트는 Next.js로 제작되었습니다."
}i18n 라이브러리 사용하여 다국어 지원 구현하기 📋
Next.js에서는 react-intl, i18next, next-translate와 같은 라이브러리를 통해 다국어 번역을 쉽게 관리할 수 있음. 여기서는 next-i18next 라이브러리를 사용하여 다국어 지원을 설정하는 방법을 알아보겠음.
next-i18next 설치
먼저, next-i18next 패키지를 설치함.
npm install next-i18next react-i18nextnext-i18next.config.js 파일 설정
프로젝트 루트에 next-i18next.config.js 파일을 생성하여 언어 설정과 로케일 디렉토리를 지정함.
// next-i18next.config.js
module.exports = {
i18n: {
locales: ["en", "ko"],
defaultLocale: "en",
localeDetection: true, // 자동으로 사용자 언어를 감지
},
};appWithTranslation으로 애플리케이션 감싸기
Next.js의 _app.js 파일에서 appWithTranslation HOC를 사용하여 애플리케이션에 i18n 기능을 추가함.
// pages/_app.js
import { appWithTranslation } from "next-i18next";
import "../styles/globals.css";
import nextI18NextConfig from "../next-i18next.config";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default appWithTranslation(MyApp, nextI18NextConfig);다국어 텍스트 번역 사용하기 📝
번역 텍스트 가져오기
useTranslation 훅을 통해 현재 로케일에 맞는 텍스트를 가져올 수 있음.
// pages/index.js
import { useTranslation } from "next-i18next";
import nextI18NextConfig from "../next-i18next.config";
export default function Home() {
const { t } = useTranslation();
return (
<div>
<h1>{t("greeting")}</h1>
<p>{t("description")}</p>
</div>
);
}라우팅과 URL에 언어 설정 적용하기 🔗
Next.js는 i18n 설정을 통해 자동으로 언어별 라우팅을 제공함. 예를 들어, /ko 경로로 접속하면 한국어로 된 페이지가 나타남.
언어 전환 기능 구현
언어를 전환하는 버튼을 만들어 다국어 기능을 사용자가 쉽게 선택할 수 있도록 구현할 수 있음.
// components/LanguageSwitcher.js
import Link from "next/link";
import { useRouter } from "next/router";
export default function LanguageSwitcher() {
const { locales, locale, asPath } = useRouter();
return (
<div>
{locales.map((lng) => (
<Link key={lng} href={asPath} locale={lng}>
<button disabled={lng === locale}>{lng.toUpperCase()}</button>
</Link>
))}
</div>
);
}SEO 최적화 및 다국어 URL 구조 📈
Next.js는 i18n을 사용할 때 SEO를 최적화하기 위해 언어별 경로를 자동으로 생성해줌. 언어별로 고유한 URL이 생성되므로, 검색 엔진이 언어별로 페이지를 크롤링할 수 있음.
- 기본 경로 /는 영어 콘텐츠로 연결됨.
- /ko 경로는 한국어 콘텐츠로 연결됨.
이렇게 언어별 경로를 제공하여 SEO 최적화 효과를 누릴 수 있음.
