Next.js 기초 <11. Next.js 15에서 다국어(i18n) 및 다이나믹 로컬라이제이션 구현>

넥스트 Next.js

11. Next.js 15에서 다국어(i18n) 및 다이나믹 로컬라이제이션 구현 

 

안녕하세요! 태마입니다.

Next.js 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

넥스트 Next.js

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. Next.js 15에서 다국어(i18n) 지원이 필요한 이유

다국어(i18n, Internationalization)는 웹 애플리케이션이 여러 언어를 지원하도록 만드는 기능이다.
Next.js 15에서는 기본적인 다국어 라우팅을 제공하며, i18n 라이브러리와 함께 사용하면 더욱 유용하다.

📌 Next.js 15에서 다국어 지원이 중요한 이유
✔ 글로벌 사용자 대상 웹사이트 운영 가능
✔ SEO 최적화 (검색 엔진이 여러 언어 페이지를 올바르게 인식)
✔ 사용자의 언어 설정에 맞춘 개인화된 경험 제공

✅ Next.js 15 다국어 지원 방식 비교

방식설명장점단점

Next.js 기본 i18n 라우팅	URL에 언어 코드 추가 (/en, /ko)	✅ SEO 최적화	❌ 직접적인 번역 기능 없음
next-intl 사용	번역 파일(JSON)을 활용한 다국어 지원	✅ 번역 관리 용이	❌ 초기 설정 필요
i18next 사용	강력한 다국어 지원 라이브러리	✅ 복잡한 다국어 지원 가능	❌ 설정이 복잡할 수 있음

📌 Next.js 15에서는 next-intl 또는 i18next를 사용하는 것이 일반적!

---

2. Next.js 15에서 다국어(i18n) 라우팅 설정하기

✅ 1) Next.js 15에서 다국어 라우팅 설정 (next.config.js)

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ["en", "ko"],
    defaultLocale: "en",
  },
};

module.exports = nextConfig;

📌 Next.js는 기본적으로 i18n 설정을 제공하여 다국어 URL을 자동으로 생성!
📌 예: /about → /ko/about, /en/about 자동 지원

✅ 2) 다국어 페이지 생성 (app/[locale]/about/page.tsx)

export default function AboutPage({ params }: { params: { locale: string } }) {
  return (
    <main>
      <h1>{params.locale === "ko" ? "소개 페이지" : "About Page"}</h1>
      <p>{params.locale === "ko" ? "이 페이지는 한국어입니다." : "This page is in English."}</p>
    </main>
  );
}

📌 Next.js 15에서는 다국어 URL이 자동으로 /ko/about, /en/about 형태로 적용된다.

✅ 3) 다국어 전환 버튼 추가 (app/components/LanguageSwitcher.tsx)

"use client";
import { usePathname, useRouter } from "next/navigation";

export default function LanguageSwitcher() {
  const router = useRouter();
  const pathname = usePathname();

  const changeLanguage = (lang: string) => {
    router.push(`/${lang}${pathname.replace(/^\/(en|ko)/, "")}`);
  };

  return (
    <div>
      <button onClick={() => changeLanguage("en")}>English</button>
      <button onClick={() => changeLanguage("ko")}>한국어</button>
    </div>
  );
}

📌 다국어 전환 버튼을 클릭하면 해당 언어의 URL로 변경됨!

---

✅ 여기까지 Next.js 15에서 기본적인 i18n 라우팅을 설정하는 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 JSON 파일을 활용한 다국어 번역을 적용하려면?"
✅ 2부에서 next-intl을 활용한 다이나믹 로컬라이제이션을 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. next-intl이란?

next-intl은 JSON 번역 파일을 활용하여 다국어를 쉽게 관리할 수 있는 Next.js 라이브러리이다.

✅ 1) next-intl 설치

$ npm install next-intl

📌 next-intl을 설치하면 JSON 번역 파일을 쉽게 적용 가능!

✅ 2) 번역 파일 생성 (messages/en.json, messages/ko.json)

📌 messages/en.json (영어 번역 파일)

{
  "title": "Welcome to Next.js 15!",
  "description": "This is an example of internationalization."
}

📌 messages/ko.json (한국어 번역 파일)

{
  "title": "Next.js 15에 오신 것을 환영합니다!",
  "description": "이것은 국제화(i18n)의 예제입니다."
}

✅ 3) 다국어 제공 함수 생성 (lib/i18n.ts)

import { createTranslator } from "next-intl";

export async function getTranslation(locale: string) {
  const messages = await import(`@/messages/${locale}.json`);
  return createTranslator({ locale, messages: messages.default });
}

📌 언어별 번역 파일을 불러와 translator를 생성하는 함수!

✅ 4) 다국어 적용 (app/[locale]/page.tsx)

import { getTranslation } from "@/lib/i18n";

export default async function HomePage({ params }: { params: { locale: string } }) {
  const t = await getTranslation(params.locale);

  return (
    <main>
      <h1>{t("title")}</h1>
      <p>{t("description")}</p>
    </main>
  );
}

📌 이제 다국어 번역이 JSON 파일을 기반으로 자동으로 적용됨!

✅ 5) 다국어 전환 버튼 업데이트 (app/components/LanguageSwitcher.tsx)

"use client";
import { useRouter } from "next/navigation";

export default function LanguageSwitcher({ currentLocale }: { currentLocale: string }) {
  const router = useRouter();

  const changeLanguage = (lang: string) => {
    router.push(`/${lang}`);
  };

  return (
    <div>
      <button onClick={() => changeLanguage("en")} disabled={currentLocale === "en"}>
        English
      </button>
      <button onClick={() => changeLanguage("ko")} disabled={currentLocale === "ko"}>
        한국어
      </button>
    </div>
  );
}

📌 버튼을 클릭하면 router.push를 사용해 다국어 페이지로 이동 가능!

---

2. 다국어 SEO 최적화 (hreflang 설정)

Google은 hreflang 태그를 통해 다국어 페이지를 올바르게 크롤링한다.

✅ 1) 다국어 SEO 최적화 (app/layout.tsx)

export const metadata = {
  title: "Next.js 15 다국어 사이트",
  description: "Next.js 15에서 다국어(i18n) 지원을 적용하는 방법을 배웁니다.",
  alternates: {
    canonical: "https://example.com",
    languages: {
      en: "https://example.com/en",
      ko: "https://example.com/ko",
    },
  },
};

 

📌 Google이 다국어 페이지를 정확하게 인식하도록 alternates를 설정!

---

✅ 여기까지 Next.js 15에서 JSON 기반 다국어 번역과 SEO 최적화 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 폼(Form) 처리 및 유효성 검사는 어떻게 할까?"
✅ 다음 회차에서 Next.js 15에서 Form 처리 및 유효성 검사를 배워봅시다!