Blog

블로그를 준비하고 있어요

잠시만 기다려주세요...

Nextjs에 다국어 설정하기

힘센캥거루

2025년 10월 18일(수정됨)

nextjs

내 블로그에 대한 유입을 늘리기 위해 어떻게 해야 할까 고민하다가 다국어 설정을 해보기로 했다.

다양한 방법을 찾아 보았는데, 일단 첫걸음은 언어에 대해 다른 라우팅을 하는 것.

next-intl을 이용해 해보기로 했다.

1. 설치

yarn add next-intl

2. 적용

적용이 다소 까다롭다.

대충 아래의 순서로 진행하면 된다.

app 내부의 폴더 라우팅 전체를 [locale] 폴더 내에 넣음.
i18n 폴더를 만들고 내부에 config.ts, request.ts, ko.json, en.json 파일 만들고 설정하기
middleware.ts, next.config.ts에서 설정
layout에서 params와 provider로 children 감싸주기
컴포넌트에서 메세지 불러오기

3. 실행해보기

export const locales = ['ko', 'en'] as const;
export type Locale = (typeof locales)[number];

export const defaultLocale: Locale = 'ko'; // 기본경로를 한국어로 설정

export const pathnames = {
  '/': '/',
  '/about': {
    ko: '/about',
    en: '/about',
  },
  '/post/[slug]': {
    ko: '/post/[slug]',
    en: '/post/[slug]',
  },
} as const;

import { getRequestConfig } from 'next-intl/server';
import { defaultLocale } from './config';

export default getRequestConfig(async ({ requestLocale }: { requestLocale: Promise<string | undefined> }) => {
  const locale = await requestLocale || defaultLocale;

  return {
    locale,
    messages: (await import(`./message/${locale}.json`)).default,
  };
});

import createMiddleware from 'next-intl/middleware';
import { locales, defaultLocale } from './i18n/config';

export createMiddleware({
  locales,
  defaultLocale,
  localePrefix: 'as-needed', // 기본(ko)은 경로에 prefix 없음
});
//...기존 설정들...//
export default withAuth(
	  function middleware(req) {
		//...기존 설정들...//
	});

import type { NextConfig } from "next";
import createNextIntlPlugin from 'next-intl/plugin';

const withNextIntl = createNextIntlPlugin()

const withNextIntlConfig: NextConfig = withNextIntl({
	기존 next.config 설정들...
});

export default withNextIntlConfig;

import { NextIntlClientProvider } from "next-intl";
import { getMessages, getLocale } from "next-intl/server";

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const messages = await getMessages();
  const locale = await getLocale();

  return (
    <html
      lang={locale}
    >
      <NextIntlClientProvider locale={locale} messages={messages}>
        <body>
		{children}
        </body>
      </NextIntlClientProvider>
    </html>
  );
}

import {useTranslations, useLocale, useFormatter} from 'next-intl'; // 'use client' 컴포넌트에서 호출
import {getTranslations, getLocale, getFormatter} from 'next-intl/server'; // server 컴포넌트에서 호출

구분	클라이언트 컴포넌트	서버 컴포넌트 / 서버 함수	설명
Translations	`useTranslations(namespace?)`	`getTranslations(namespace?)`	`ko.json`, `en.json` 등의 번역 메시지를 가져와서 `t('key')` 형태로 사용
Locale	`useLocale()`	`getLocale()`	현재 활성화된 로케일(`/en`, `/ko`, …)을 문자열로 반환
Formatter	`useFormatter()`	`getFormatter()`	날짜, 시간, 숫자 등을 로케일에 맞게 포맷팅
Messages	—	`getMessages()`	현재 요청의 전체 번역 메시지 객체(보통 layout에서 Provider용으로 사용)
Request Locale 설정	—	`unstable_setRequestLocale(locale)`	SSG·SSR 캐싱 시 로케일 정합성을 보장할 때 layout에서 사용

import {
  HeroSection,
  JourneySection,
  ProjectsSection,
} from "@/components/about";


const baseUrl = process.env.NEXT_PUBLIC_URL||"";

export default function AboutPage() {
	...
  const heroData = {
	...
  };

  const journeyData = {
    title: "My Journey",
    items: [
	.....
	]
  };

  const projectsData = {
    title: "Featured Projects",
    projects: [
      {
        title: "대입 통계분석",
		...
      },
	...
    ],
  };

  return (
    <div className="min-h-screen bg-gray-900 ">
      <main className="rounded-lg container relative mx-auto scroll-my-12 overflow-auto">
        {/* Language Selector */}
        <HeroSection {...heroData} />
        <JourneySection {...journeyData} />
        <ProjectsSection {...projectsData} />
      </main>
    </div>
  );
}

export default async function AboutPage() {
	...
  const t = await getTranslations("about");
  const heroData = JSON.parse(JSON.stringify(t("hero")));
  const journeyData = JSON.parse(JSON.stringify(t("journey")));
  const projectsData = JSON.parse(JSON.stringify(t("projects")));
	...
}

Blog

목차

Nextjs에 다국어 설정하기

1. 설치

2. 적용

3. 실행해보기

1) [locale] 폴더

2) i18n 폴더 만들기

3) middleware.ts, next.config.ts 설정하기

4) 레이아웃 감싸주기

5) 메세지 써보기

4. 후기