Intlayer로 Tanstack Start 번역하기 | 국제화(i18n)

import { createFileRoute, Outlet } from "@tanstack/react-router";import { IntlayerProvider, useLocale } from "react-intlayer";import { useI18nHTMLAttributes } from "@/hooks/useI18nHTMLAttributes";export const Route = createFileRoute("/{-$locale}")({  component: LayoutComponent,});function LayoutComponent() {  const { defaultLocale } = useLocale();  const { locale } = Route.useParams();  return (    <IntlayerProvider locale={locale ?? defaultLocale}>      <Outlet />    </IntlayerProvider>  );}

import type { Dictionary } from "intlayer";import { t } from "intlayer";const appContent = {  content: {    links: {      about: t({        ko: "소개",        en: "About",        es: "Acerca de",        fr: "À propos",      }),      home: t({        ko: "홈",        en: "Home",        es: "Inicio",        fr: "Accueil",      }),    },    meta: {      description: t({        ko: "이것은 TanStack Router와 함께 Intlayer를 사용하는 예제입니다",        en: "This is an example of using Intlayer with TanStack Router",        es: "Este es un ejemplo de uso de Intlayer con TanStack Router",        fr: "Ceci est un exemple d'utilisation d'Intlayer avec TanStack Router",      }),    },    title: t({      ko: "Intlayer + TanStack Router에 오신 것을 환영합니다",      en: "Welcome to Intlayer + TanStack Router",      es: "Bienvenido a Intlayer + TanStack Router",      fr: "Bienvenue à Intlayer + TanStack Router",    }),  },  key: "app",} satisfies Dictionary;export default appContent;

import type { FC } from "react";import { Link, type LinkComponentProps } from "@tanstack/react-router";import { useLocale } from "react-intlayer";import { getPrefix } from "intlayer";export const LOCALE_ROUTE = "{-$locale}" as const;// 주요 유틸리티export type RemoveLocaleParam<T> = T extends string  ? RemoveLocaleFromString<T>  : T;export type To = RemoveLocaleParam<LinkComponentProps["to"]>;type CollapseDoubleSlashes<S extends string> =  S extends `${infer H}//${infer T}` ? CollapseDoubleSlashes<`${H}/${T}`> : S;type LocalizedLinkProps = {  to?: To;} & Omit<LinkComponentProps, "to">;// 헬퍼 함수들type RemoveAll<  S extends string,  Sub extends string,> = S extends `${infer H}${Sub}${infer T}` ? RemoveAll<`${H}${T}`, Sub> : S;type RemoveLocaleFromString<S extends string> = CollapseDoubleSlashes<  RemoveAll<S, typeof LOCALE_ROUTE>>;export const LocalizedLink: FC<LocalizedLinkProps> = (props) => {  const { locale } = useLocale();  const { localePrefix } = getPrefix(locale);  return (    <Link      {...props}      params={{        locale: localePrefix,        ...(typeof props?.params === "object" ? props?.params : {}),      }}      to={`/${LOCALE_ROUTE}${props.to}` as LinkComponentProps["to"]}    />  );};

import { useNavigate } from "@tanstack/react-router";import { getPrefix } from "intlayer";import { useLocale } from "react-intlayer";import { LOCALE_ROUTE } from "@/components/localized-link";import type { FileRouteTypes } from "@/routeTree.gen";type StripLocalePrefix<T extends string> = T extends  | `/${typeof LOCALE_ROUTE}`  | `/${typeof LOCALE_ROUTE}/`  ? "/"  : T extends `/${typeof LOCALE_ROUTE}/${infer Rest}`    ? `/${Rest}`    : never;type LocalizedTo = StripLocalePrefix<FileRouteTypes["to"]>;type LocalizedNavigate = {  (to: LocalizedTo): ReturnType<ReturnType<typeof useNavigate>>;  (    opts: { to: LocalizedTo } & Record<string, unknown>  ): ReturnType<ReturnType<typeof useNavigate>>;};export const useLocalizedNavigate = () => {  const navigate = useNavigate();  const { locale } = useLocale();  const localizedNavigate: LocalizedNavigate = (args: any) => {    const { localePrefix } = getPrefix(locale);    if (typeof args === "string") {      return navigate({        to: `/${LOCALE_ROUTE}${args}`,        params: { locale: localePrefix },      });    }    const { to, ...rest } = args;    const localizedTo = `/${LOCALE_ROUTE}${to}` as any;    return navigate({      to: localizedTo,      params: { locale: localePrefix, ...rest } as any,    });  };  return localizedNavigate;};

import { createFileRoute } from "@tanstack/react-router";import { getIntlayer } from "intlayer";import { useIntlayer } from "react-intlayer";import LocaleSwitcher from "@/components/locale-switcher";import { LocalizedLink } from "@/components/localized-link";import { useLocalizedNavigate } from "@/hooks/useLocalizedNavigate";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,  head: ({ params }) => {    const { locale } = params;    const metaContent = getIntlayer("app", locale);    return {      meta: [        { title: metaContent.title },        { content: metaContent.meta.description, name: "description" },      ],    };  },});function RouteComponent() {  const content = useIntlayer("app");  const navigate = useLocalizedNavigate();  return (    <div>      <div>        {content.title}        <LocaleSwitcher />        <div>          <LocalizedLink to="/">{content.links.home}</LocalizedLink>          <LocalizedLink to="/about">{content.links.about}</LocalizedLink>        </div>        <div>          <button onClick={() => navigate({ to: "/" })}>            {content.links.home}          </button>          <button onClick={() => navigate({ to: "/about" })}>            {content.links.about}          </button>        </div>      </div>    </div>  );}

import type { FC } from "react";import { useLocation } from "@tanstack/react-router";import {  getHTMLTextDir,  getLocaleName,  getPathWithoutLocale,  getPrefix,  Locales,} from "intlayer";import { useLocale } from "react-intlayer";import { LocalizedLink, To } from "./localized-link";export const LocaleSwitcher: FC = () => {  const { pathname } = useLocation();  const { availableLocales, locale, setLocale } = useLocale();  const pathWithoutLocale = getPathWithoutLocale(pathname);  return (    <ol>      {availableLocales.map((localeEl) => (        <li key={localeEl}>          <LocalizedLink            aria-current={localeEl === locale ? "page" : undefined}            onClick={() => setLocale(localeEl)}            params={{ locale: getPrefix(localeEl).localePrefix }}          >            <span>              {/* 로케일 - 예: FR */}              {localeEl}            </span>            <span>              {/* 해당 로케일 내 언어 - 예: Français */}              {getLocaleName(localeEl, locale)}            </span>            <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>              {/* 현재 로케일 내 언어 - 예: 현재 로케일이 Locales.SPANISH일 때 Francés */}              {getLocaleName(localeEl)}            </span>            <span dir="ltr" lang={Locales.ENGLISH}>              {/* 영어로 된 언어 - 예: French */}              {getLocaleName(localeEl, Locales.ENGLISH)}            </span>          </LocalizedLink>        </li>      ))}    </ol>  );};

// src/hooks/useI18nHTMLAttributes.tsximport { getHTMLTextDir } from "intlayer";import { useEffect } from "react";import { useLocale } from "react-intlayer";export const useI18nHTMLAttributes = () => {  const { locale } = useLocale();  useEffect(() => {    document.documentElement.lang = locale;    document.documentElement.dir = getHTMLTextDir(locale);  }, [locale]);};

import { createFileRoute, Outlet } from "@tanstack/react-router";import { IntlayerProvider, useLocale } from "react-intlayer";import { useI18nHTMLAttributes } from "@/hooks/useI18nHTMLAttributes"; // 훅을 임포트합니다.export const Route = createFileRoute("/{-$locale}")({  component: LayoutComponent,});function LayoutComponent() {  useI18nHTMLAttributes(); // 이 줄을 추가합니다.  const { defaultLocale } = useLocale();  const { locale } = Route.useParams();  return (    <IntlayerProvider locale={locale ?? defaultLocale}>      <Outlet />    </IntlayerProvider>  );}

import { createFileRoute } from "@tanstack/react-router";import { getIntlayer } from "intlayer";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,  head: ({ params }) => {    const { locale } = params;    const metaContent = getIntlayer("page-metadata", locale);    return {      meta: [        { title: metaContent.title },        { content: metaContent.description, name: "description" },      ],    };  },});

import { createServerFn } from "@tanstack/react-start";import {  getRequestHeader,  getRequestHeaders,} from "@tanstack/react-start/server";import { getCookie, getIntlayer, getLocale } from "intlayer";export const getLocaleServer = createServerFn().handler(async () => {  const locale = await getLocale({    // Get the cookie from the request (default: 'INTLAYER_LOCALE')    getCookie: (name) => {      const cookieString = getRequestHeader("cookie");      return getCookie(name, cookieString);    },    // Get the header from the request (default: 'x-intlayer-locale')    // Fallback using Accept-Language negotiation    getHeader: (name) => getRequestHeader(name),  });  // Retrieve some content using getIntlayer()  const content = getIntlayer("app", locale);  return { locale, content };});

import { createFileRoute } from "@tanstack/react-router";// 이것은 전용 /[locale]/404 경로를 생성합니다// 직접 경로로 사용되거나 다른 파일에서 컴포넌트로 가져올 수 있습니다export const Route = createFileRoute("/{-$locale}/404")({  component: NotFoundComponent,});// notFoundComponent 및 catch-all 경로에서 재사용할 수 있도록 별도로 내보냅니다export function NotFoundComponent() {  return (    <div>      <h1>404</h1>    </div>  );}

import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";import { validatePrefix } from "intlayer";import { IntlayerProvider, useLocale } from "react-intlayer";import { LocaleSwitcher } from "@/components/locale-switcher";import { NotFoundComponent } from "./404";export const Route = createFileRoute("/{-$locale}")({  // beforeLoad는 경로가 렌더링되기 전에 실행됩니다 (서버와 클라이언트 모두에서)  // 로케일 접두사를 검증하기에 이상적인 장소입니다  beforeLoad: ({ params }) => {    // 경로 매개변수에서 로케일 가져오기 (서버 헤더에서 가져오지 않음, beforeLoad는 클라이언트와 서버 모두에서 실행되기 때문)    const localeParam = params.locale;    // validatePrefix는 로케일이 intlayer 구성에 따라 유효한지 확인합니다    // 반환: { isValid: boolean, localePrefix: string }    // - isValid: 접두사가 구성된 로케일과 일치하면 true (또는 접두사가 선택 사항일 때 비어 있음)    // - localePrefix: 검증된 접두사 또는 리디렉션을 위한 기본 로케일 접두사    const { isValid, localePrefix } = validatePrefix(localeParam);    if (isValid) {      // 로케일이 유효합니다. 경로가 정상적으로 렌더링되도록 허용합니다      return;    }    // 잘못된 로케일 접두사 (예: "xyz"가 유효한 로케일이 아닌 /xyz/about)    // 유효한 로케일 접두사가 있는 404 페이지로 리디렉션    // 이것은 404 페이지가 여전히 제대로 현지화되도록 보장합니다    throw redirect({      to: "/{-$locale}/404",      params: { locale: localePrefix },    });  },  component: RouteComponent,  // notFoundComponent는 자식 경로가 존재하지 않을 때 호출됩니다  // 예: /en/존재하지-않는-페이지가 /en 레이아웃 내에서 이를 트리거합니다  notFoundComponent: NotFoundLayout,});function RouteComponent() {  const { defaultLocale } = useLocale();  const { locale } = Route.useParams();  return (    // 전체 로케일 세그먼트를 IntlayerProvider로 래핑    // 로케일 매개변수가 undefined일 때 defaultLocale로 폴백 (선택적 접두사 모드)    <IntlayerProvider locale={locale ?? defaultLocale}>      <Outlet />    </IntlayerProvider>  );}// NotFoundLayout는 404 컴포넌트를 IntlayerProvider로 래핑합니다// 이것은 404 페이지에서 번역이 여전히 작동하도록 보장합니다function NotFoundLayout() {  const { defaultLocale } = useLocale();  const { locale } = Route.useParams();  return (    <IntlayerProvider locale={locale ?? defaultLocale}>      <NotFoundComponent />      {/* 사용자가 404에서도 언어를 변경할 수 있도록 LocaleSwitcher 포함 */}      <LocaleSwitcher />    </IntlayerProvider>  );}

import { createFileRoute } from "@tanstack/react-router";import { NotFoundComponent } from "./404";// $ (splat/catch-all) 경로는 다른 경로와 일치하지 않는 모든 경로와 일치합니다// 예: /en/어떤/깊게/중첩된/유효하지-않은/경로// 이것은 로케일 내의 일치하지 않는 모든 경로가 404 페이지를 표시하도록 보장합니다// 이것이 없으면 일치하지 않는 깊은 경로가 빈 페이지나 오류를 표시할 수 있습니다export const Route = createFileRoute("/{-$locale}/$")({  component: NotFoundComponent,});