생성:2025-03-25마지막 업데이트:2026-05-06

GitHub에서 애플리케이션 템플릿 보기

이 페이지에는 애플리케이션 템플릿이 제공됩니다.

쇼케이스 애플리케이션 보기

이 페이지는 템플릿의 라이브 데모로 연결됩니다.

비디오 튜토리얼 보기

이 페이지에는 비디오 튜토리얼이 제공됩니다.

이 문서를 원하는 AI 어시스턴트에 참조하세요

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

이 페이지와 원하는 AI 어시스턴트를 사용하여 문서를 요약합니다

버전 기록

"Solid useIntlayer API 사용법을 직접 속성 액세스로 업데이트"
v8.9.02026. 5. 4.
"Tanstack Start Solid.js용으로 추가됨"
v8.5.12026. 3. 25.

이 페이지의 콘텐츠는 AI를 사용하여 번역되었습니다.

영어 원본 내용의 최신 버전을 보기

문서 수정

이 문서를 개선할 아이디어가 있으시면 GitHub에 풀 리퀘스트를 제출하여 자유롭게 기여해 주세요.

문서에 대한 GitHub 링크

복사

문서의 Markdown을 클립보드에 복사

Intlayer를 사용하여 Solid.js 기반 Tanstack Start 웹사이트 번역하기 | 국제화 (i18n)

Name: Intlayer
Author: Intlayer

Intlayer란 무엇인가요?

Intlayer는 최신 웹 애플리케이션에서 다국어 지원을 단순화하도록 설계된 혁신적인 오픈 소스 국제화(i18n) 라이브러리입니다.

Intlayer를 사용하면 다음을 수행할 수 있습니다.

컴포넌트 수준에서 선언적 딕셔너리를 사용하여 번역을 쉽게 관리할 수 있습니다.
메타데이터, 라우트 및 콘텐츠를 동적으로 로컬라이즈할 수 있습니다.
자동 생성된 타입을 통해 TypeScript 지원을 보장하여 자동 완성 및 오류 감지 기능을 향상시킵니다.
동적 로케일 감지 및 전환과 같은 고급 기능을 활용할 수 있습니다.
Tanstack Start의 파일 기반 라우팅 시스템을 통해 로케일 인식 라우팅을 활성화할 수 있습니다.

Tanstack Start 애플리케이션에서 Intlayer를 설정하기 위한 단계별 가이드

www.youtube.com

GitHub에서 애플리케이션 템플릿을 확인하세요.

1단계: 프로젝트 생성

먼저 TanStack Start 웹사이트의 새 프로젝트 시작 가이드에 따라 새로운 TanStack Start 프로젝트를 생성합니다.

2단계: Intlayer 패키지 설치

선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다.

bash

코드 복사

코드를 클립보드에 복사

npm install intlayer solid-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer

구성 관리, 번역, 콘텐츠 선언, 트랜스파일 및 CLI 명령을 위한 국제화 도구를 제공하는 핵심 패키지입니다.
solid-intlayer Intlayer를 Solid 애플리케이션과 통합하는 패키지입니다. Solid 국제화를 위한 컨텍스트 프로바이더와 훅을 제공합니다.
vite-intlayer Intlayer를 Vite 번들러와 통합하기 위한 Vite 플러그인과 사용자의 선호 로케일 감지, 쿠키 관리 및 URL 리디렉션 처리를 위한 미들웨어를 포함합니다.

3단계: 프로젝트 구성

애플리케이션의 언어를 구성하기 위한 구성 파일을 만듭니다.

intlayer.config.ts

코드 복사

코드를 클립보드에 복사

import type { IntlayerConfig } from "intlayer";import { Locales } from "intlayer";const config: IntlayerConfig = {  internationalization: {    defaultLocale: Locales.ENGLISH,    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],  },};export default config;

이 구성 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔의 Intlayer 로그 비활성화 등을 수행할 수 있습니다. 사용 가능한 전체 매개변수 목록은 구성 문서를 참조하세요.

4단계: Vite 구성에 Intlayer 통합

Vite 구성에 intlayer 플러그인을 추가합니다.

vite.config.ts

코드 복사

코드를 클립보드에 복사

import { intlayer } from "vite-intlayer";import { defineConfig } from "vite";import { devtools } from "@tanstack/devtools-vite";import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solidPlugin from "vite-plugin-solid";export default defineConfig({  plugins: [    devtools(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    solidPlugin({ ssr: true }),    intlayer(),  ],});

intlayer() Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 모니터링합니다. Vite 애플리케이션 내에 Intlayer 환경 변수를 정의합니다. 또한 성능 최적화를 위한 별칭(alias)을 제공합니다.

5단계: 루트 레이아웃 생성

useParams를 사용하여 현재 로케일을 감지하고 html 태그에 lang 및 dir 속성을 설정하여 국제화를 지원하도록 루트 레이아웃을 구성합니다.

src/routes/__root.tsx

코드 복사

코드를 클립보드에 복사

import {  HeadContent,  Scripts,  createRootRouteWithContext,} from "@tanstack/solid-router";import { HydrationScript } from "solid-js/web";import { Suspense, type ParentComponent } from "solid-js";import { IntlayerProvider } from "solid-intlayer";import { defaultLocale, getHTMLTextDir } from "intlayer";import { Route as LocaleRoute } from "./{-$locale}/route";export const Route = createRootRouteWithContext()({  shellComponent: RootComponent,});const RootComponent: ParentComponent = (props) => {  const params = LocaleRoute.useParams();  const locale = params()?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      <head>        <HydrationScript />        <HeadContent />      </head>      <body>        <IntlayerProvider locale={locale}>          <Suspense>{props.children}</Suspense>        </IntlayerProvider>        <Scripts />      </body>    </html>  );};

6단계: 로케일 레이아웃 생성 (선택 사항)

로케일 접두사를 처리하고 유효성 검사를 수행하는 레이아웃을 만듭니다. 이 레이아웃은 유효한 로케일만 처리되도록 보장합니다.

라우트 수준에서 로케일 접두사를 검증할 필요가 없는 경우 이 단계는 선택 사항입니다.

src/routes/{-$locale}/route.tsx

코드 복사

코드를 클립보드에 복사

import { createFileRoute, Outlet, redirect } from "@tanstack/solid-router";import { validatePrefix } from "intlayer";export const Route = createFileRoute("/{-$locale}")({  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // 로케일 접두사 유효성 검사    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },        replace: true,      });    }  },  component: Outlet,});

여기서 {-$locale}은 현재 로케일로 대체되는 동적 라우트 매개변수입니다. 이 표기법은 해당 슬롯을 선택 사항으로 만들어 'prefix-no-default' 등과 같은 라우팅 모드와 함께 작동할 수 있게 합니다.

동일한 라우트에서 여러 동적 세그먼트를 사용하는 경우(예: /{-$locale}/other-path/$anotherDynamicPath/...) 이 슬롯이 문제를 일으킬 수 있음에 유의하세요. 'prefix-all' 모드의 경우 슬롯을 $locale로 전환하는 것을 선호할 수 있습니다. 'no-prefix' 또는 'search-params' 모드의 경우 슬롯을 완전히 제거할 수 있습니다.

7단계: 콘텐츠 선언

번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다.

src/contents/page.content.ts

코드 복사

코드를 클립보드에 복사

import type { Dictionary } from "intlayer";import { t } from "intlayer";const appContent = {  content: {    links: {      about: t({        en: "About",        es: "Acerca de",        fr: "À propos",      }),      home: t({        en: "Home",        es: "Inicio",        fr: "Accueil",      }),    },    meta: {      title: t({        en: "Welcome to Intlayer + TanStack Router",        es: "Bienvenido a Intlayer + TanStack Router",        fr: "Bienvenue à Intlayer + TanStack Router",      }),      description: t({        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",      }),    },  },  key: "app",} satisfies Dictionary;export default appContent;

콘텐츠 선언은 contentDir 디렉터리(기본값: ./app)에 포함되어 있고 콘텐츠 선언 파일 확장자(기본값: .content.{json,ts,tsx,js,jsx,mjs,cjs})와 일치하는 경우 애플리케이션 어디에서나 정의할 수 있습니다.

자세한 내용은 콘텐츠 선언 문서를 참조하세요.

8단계: 로케일 인식 컴포넌트 및 훅 활용

로케일 인식 내비게이션을 위해 LocalizedLink 컴포넌트를 만듭니다.

src/components/LocalizedLink.tsx

코드 복사

코드를 클립보드에 복사

import { Link, type LinkProps } from "@tanstack/solid-router";import { getPrefix } from "intlayer";import { useLocale } from "solid-intlayer";import type { JSX } from "solid-js";export const LOCALE_ROUTE = "{-$locale}" as const;export type RemoveLocaleParam<TVal> = TVal extends string  ? RemoveLocaleFromString<TVal>  : TVal;export type To = RemoveLocaleParam<LinkProps["to"]>;type CollapseDoubleSlashes<TString extends string> =  TString extends `${infer THead}//${infer TTail}`    ? CollapseDoubleSlashes<`${THead}/${TTail}`>    : TString;export type LocalizedLinkProps = Omit<LinkProps, "to"> & {  to?: To;} & JSX.AnchorHTMLAttributes<HTMLAnchorElement>;type RemoveAll<  TString extends string,  TSub extends string,> = TString extends `${infer THead}${TSub}${infer TTail}`  ? RemoveAll<`${THead}${TTail}`, TSub>  : TString;type RemoveLocaleFromString<TString extends string> = CollapseDoubleSlashes<  RemoveAll<TString, typeof LOCALE_ROUTE>>;export const LocalizedLink = (props: LocalizedLinkProps) => {  const { locale } = useLocale();  return (    <Link      {...props}      params={{        locale: getPrefix(locale()).localePrefix,        ...(typeof props.params === "object" ? props.params : {}),      }}      to={`/${LOCALE_ROUTE}${props.to ?? ""}` as LinkProps["to"]}    />  );};

이 컴포넌트는 두 가지 목적을 가집니다.

URL에서 불필요한 {-$locale} 접두사를 제거합니다.
사용자가 로컬라이즈된 라우트로 직접 리디렉션되도록 로케일 매개변수를 URL에 주입합니다.

그런 다음 프로그래밍 방식의 내비게이션을 위해 useLocalizedNavigate 훅을 만들 수 있습니다.

src/hooks/useLocalizedNavigate.tsx

코드 복사

코드를 클립보드에 복사

import { useNavigate } from "@tanstack/solid-router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";export const useLocalizedNavigate = () => {  const navigate = useNavigate();  const { locale } = useLocale();  const localizedNavigate = (to: string) => {    const localizedTo = getLocalizedUrl(to, locale());    return navigate({ to: localizedTo });  };  return localizedNavigate;};

9단계: 페이지에서 Intlayer 사용

애플리케이션 전체에서 콘텐츠 딕셔너리에 접근하세요.

로컬라이즈된 홈 페이지

src/routes/{-$locale}/index.tsx

코드 복사

코드를 클립보드에 복사

import { createFileRoute } from "@tanstack/solid-router";import { useIntlayer } from "solid-intlayer";import { LocalizedLink } from "@/components/LocalizedLink";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,});function RouteComponent() {  const content = useIntlayer("index-page");  return (    <main>      <h1>{content.heroTitle}</h1>      <p>{content.heroDesc}</p>      <div>        <LocalizedLink to="/">{content.navHome}</LocalizedLink>        <LocalizedLink to="/about">{content.navAbout}</LocalizedLink>      </div>    </main>  );}

콘텐츠를 alt, title, href, aria-label 등과 같은 string 속성에서 사용하려면, 함수의 값을 호출해야 합니다. 예를 들어:

html

코드 복사

코드를 클립보드에 복사

<img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

Solid에서 useIntlayer는 반응형 콘텐츠(예: content)를 반환합니다. 그 속성에 직접 액세스할 수 있습니다.

useIntlayer 훅에 대해 자세히 알아보려면 문서를 참조하세요.

10단계: 로케일 스위처 컴포넌트 생성

사용자가 언어를 변경할 수 있도록 하는 컴포넌트를 만듭니다.

src/components/LocaleSwitcher.tsx

코드 복사

코드를 클립보드에 복사

import { useLocation } from "@tanstack/solid-router";import { getLocaleName, getPathWithoutLocale, getPrefix } from "intlayer";import { For } from "solid-js";import { useIntlayer, useLocale } from "solid-intlayer";import { LocalizedLink, type To } from "./LocalizedLink";export const LocaleSwitcher = () => {  const content = useIntlayer("locale-switcher");  const location = useLocation();  const { availableLocales, locale, setLocale } = useLocale();  const pathWithoutLocale = () => getPathWithoutLocale(location().pathname);  return (    <div class="flex flex-row gap-2">      <For each={availableLocales}>        {(localeEl) => (          <LocalizedLink            aria-current={localeEl === locale() ? "page" : undefined}            onClick={() => setLocale(localeEl)}            params={{ locale: getPrefix(localeEl).localePrefix }}            to={pathWithoutLocale() as To}          >            {getLocaleName(localeEl)}          </LocalizedLink>        )}      </For>    </div>  );};export default LocaleSwitcher;

Solid에서 useLocale의 locale은 시그널 접근자입니다. 현재 값을 반응형으로 읽으려면 locale()(괄호 포함)을 사용하세요.

useLocale 훅에 대해 자세히 알아보려면 문서를 참조하세요.

11단계: HTML 속성 관리

5단계에서 본 것처럼 루트 컴포넌트에서 useParams를 사용하여 html 태그의 lang 및 dir 속성을 관리할 수 있습니다. 이를 통해 서버와 클라이언트 모두에서 올바른 속성이 설정되도록 할 수 있습니다.

src/routes/__root.tsx

코드 복사

코드를 클립보드에 복사

const RootComponent: ParentComponent = (props) => {  const params = LocaleRoute.useParams();  const locale = params()?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      {/* ... */}    </html>  );};

12단계: 미들웨어 추가 (선택 사항)

intlayerProxy를 사용하여 애플리케이션에 서버 사이드 라우팅을 추가할 수도 있습니다. 이 플러그인은 URL을 기반으로 현재 로케일을 자동으로 감지하고 적절한 로케일 쿠키를 설정합니다. 로케일이 지정되지 않은 경우, 플러그인은 사용자의 브라우저 언어 환경설정에 따라 가장 적절한 로케일을 결정합니다. 감지된 로케일이 없으면 기본 로케일로 리디렉션합니다.

프로덕션에서 intlayerProxy를 사용하려면 vite-intlayer 패키지를 devDependencies에서 dependencies로 변경해야 합니다.

vite.config.ts

코드 복사

코드를 클립보드에 복사

import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solid from "vite-plugin-solid";import { nitro } from "nitro/vite";import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";export default defineConfig({  plugins: [    intlayerProxy(), // Nitro를 사용하는 경우 프록시는 서버 앞에 배치되어야 합니다.    nitro(),    intlayer(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    solid(),  ],});

12단계: 메타데이터 국제화 (선택 사항)

로케일 인식 메타데이터를 위해 head 로더 내에서 getIntlayer 함수를 사용하여 콘텐츠 딕셔너리에 접근할 수도 있습니다.

src/routes/{-$locale}/index.tsx

코드 복사

코드를 클립보드에 복사

import { createFileRoute } from "@tanstack/solid-router";import { getIntlayer } from "intlayer";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,  head: ({ params }) => {    const { locale } = params;    const path = "/"; // The path for this route    const metaContent = getIntlayer("app", locale);    return {      links: [        // Canonical link: Points to the current localized page        { rel: "canonical", href: getLocalizedUrl(path, locale) },        // Hreflang: Tell Google about all localized versions        ...localeMap(({ locale: mapLocale }) => ({          rel: "alternate",          hrefLang: mapLocale,          href: getLocalizedUrl(path, mapLocale),        })),        // x-default: For users in unmatched languages        // Define the default fallback locale (usually your primary language)        {          rel: "alternate",          hrefLang: "x-default",          href: getLocalizedUrl(path, defaultLocale),        },      ],      meta: [        { title: metaContent.title },        { name: "description", content: metaContent.meta.description },      ],    };  },});

13단계: 서버 액션에서 로케일 검색 (선택 사항)

서버 액션이나 API 엔드포인트 내에서 현재 로케일에 접근하고 싶을 수 있습니다. intlayer의 getLocale 헬퍼를 사용하여 이를 수행할 수 있습니다.

다음은 TanStack Start의 서버 함수를 사용하는 예입니다.

src/routes/{-$locale}/index.tsx

코드 복사

코드를 클립보드에 복사

import { createServerFn } from "@tanstack/solid-start";import {  getRequestHeader,  getRequestHeaders,} from "@tanstack/solid-start/server";import { getCookie, getIntlayer, getLocale } from "intlayer";export const getLocaleServer = createServerFn().handler(async () => {  const locale = await getLocale({    // 요청에서 쿠키를 가져옵니다 (기본값: 'INTLAYER_LOCALE')    getCookie: (name) => {      const cookieString = getRequestHeader("cookie");      return getCookie(name, cookieString);    },    // 요청에서 헤더를 가져옵니다 (기본값: 'x-intlayer-locale')    // Accept-Language 협상을 사용한 폴백    getHeader: (name) => getRequestHeader(name),  });  // getIntlayer()를 사용하여 콘텐츠 검색  const content = getIntlayer("app", locale);  return { locale, content };});

14단계: 찾을 수 없는 페이지 관리 (선택 사항)

사용자가 존재하지 않는 페이지를 방문할 때 사용자 지정 404 페이지를 표시할 수 있으며, 로케일 접두사가 404 페이지가 트리거되는 방식에 영향을 줄 수 있습니다.

로케일 접두사가 있는 TanStack Router의 404 처리 이해하기

TanStack Router에서 로컬라이즈된 라우트를 사용하여 404 페이지를 처리하려면 다층적인 접근 방식이 필요합니다.

전용 404 라우트: 404 UI를 표시하는 특정 라우트
라우트 수준 유효성 검사: 로케일 접두사를 구문 분석하고 잘못된 접두사를 404로 리디렉션
Catch-all 라우트: 로케일 세그먼트 내에서 일치하지 않는 모든 경로를 캡처

src/routes/{-$locale}/404.tsx

코드 복사

코드를 클립보드에 복사

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

src/routes/{-$locale}/route.tsx

코드 복사

코드를 클립보드에 복사

import { createFileRoute, Outlet, redirect } from "@tanstack/solid-router";import { validatePrefix } from "intlayer";import { NotFoundComponent } from "./404";export const Route = createFileRoute("/{-$locale}")({  // beforeLoad는 라우트가 렌더링되기 전에 실행됩니다(서버와 클라이언트 모두 해당).  // 로케일 접두사를 유효성 검사하기에 가장 이상적인 장소입니다.  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // validatePrefix는 intlayer 구성을 기반으로 로케일이 유효한지 확인합니다.    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      // 잘못된 로케일 접두사 - 유효한 로케일 접두사를 사용하여 404 페이지로 리디렉션      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },      });    }  },  component: Outlet,  // notFoundComponent는 하위 라우트가 존재하지 않을 때 호출됩니다.  // 예: /en/존재하지-않는-페이지는 /en 레이아웃 내에서 이를 트리거합니다.  notFoundComponent: NotFoundComponent,});

src/routes/{-$locale}/$.tsx

코드 복사

코드를 클립보드에 복사

import { createFileRoute } from "@tanstack/solid-router";import { NotFoundComponent } from "./404";// $ (splat/catch-all) 라우트는 다른 라우트와 일치하지 않는 모든 경로와 일치합니다.// 예: /en/some/deeply/nested/invalid/path// 이를 통해 로케일 내의 모든 일치하지 않는 경로가 404 페이지를 표시하도록 보장합니다.// 이것이 없으면 일치하지 않는 깊은 경로가 빈 페이지나 오류를 표시할 수 있습니다.export const Route = createFileRoute("/{-$locale}/$")({  component: NotFoundComponent,});

15단계: 컴포넌트의 콘텐츠 추출 (선택 사항)

기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 것은 시간이 많이 걸릴 수 있습니다.

이 프로세스를 쉽게 하기 위해 Intlayer는 컴포넌트를 변환하고 콘텐츠를 추출하는 컴파일러 / 추출기를 제안합니다.

이를 설정하려면 intlayer.config.ts 파일에 compiler 섹션을 추가하면 됩니다.

intlayer.config.ts

코드 복사

코드를 클립보드에 복사

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... 나머지 구성
  compiler: {
    /**
     * 컴파일러 사용 여부를 나타냅니다.
     */
    enabled: true,

    /**
     * 출력 파일 경로를 정의합니다.
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * 변환된 후 컴포넌트를 저장할지 여부를 나타냅니다.
     *
     * - `true`인 경우 컴파일러는 디스크의 컴포넌트 파일을 다시 씁니다. 따라서 변환은 영구적이 되고 컴파일러는 다음 프로세스에서 변환을 건너뜁니다. 이렇게 하면 컴파일러가 앱을 변환한 다음 제거할 수 있습니다.
     *
     * - `false`인 경우 컴파일러는 빌드 출력 코드에만 `useIntlayer()` 함수 호출을 주입하고 기본 코드베이스는 그대로 유지합니다. 변환은 메모리에서만 수행됩니다.
     */
    saveComponents: false,

    /**
     * 딕셔너리 키 접두사
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

추출기를 실행하여 컴포넌트를 변환하고 콘텐츠를 추출하세요.

bash

코드 복사

코드를 클립보드에 복사

npx intlayer extract

intlayerCompiler 플러그인을 포함하도록 vite.config.ts를 업데이트하세요.

vite.config.ts

코드 복사

코드를 클립보드에 복사

import { intlayer, intlayerCompiler } from "vite-intlayer";import { defineConfig } from "vite";import { devtools } from "@tanstack/devtools-vite";import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solidPlugin from "vite-plugin-solid";export default defineConfig({ plugins: [   devtools(),   tanstackStart({     router: {       routeFileIgnorePattern:         ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",     },   }),   solidPlugin({ ssr: true }),   intlayer(),   intlayerCompiler(), ],});

bash

코드 복사

코드를 클립보드에 복사

npm run build # 또는 npm run dev

16단계: 사이트맵 생성 (선택 사항)

Intlayer에는 애플리케이션의 사이트맵을 쉽게 만들 수 있는 내장 사이트맵 생성기가 포함되어 있습니다. 로컬라이즈된 경로를 처리하고 검색 엔진에 필요한 메타데이터를 추가합니다.

Intlayer에서 생성한 사이트맵은 xhtml:link 네임스페이스(Hreflang XML 확장)를 지원합니다. 원시 URL만 나열하는 기본 사이트맵 생성기와 달리, Intlayer는 페이지의 모든 언어 버전(예: /about, /about?lang=fr, /about?lang=es) 간에 필요한 양방향 링크를 자동으로 생성합니다. 이를 통해 검색 엔진이 올바른 언어 버전을 올바른 사용자에게 색인화하고 제공할 수 있도록 보장합니다.

이를 사용하려면 먼저 vite.config.ts를 구성하여 로컬라이즈된 경로에 대한 사전 렌더링(pre-rendering)을 활성화하고 TanStack Start의 기본 사이트맵 생성을 비활성화해야 합니다.

vite.config.ts

코드 복사

코드를 클립보드에 복사

import { localeMap, localeFlatMap } from "intlayer";// ... 기타 임포트export const pathList = ["", "/about", "/404"];const localizedPages = localeFlatMap(({ urlPrefix }) =>  pathList.map((path) => ({    path: `${urlPrefix}${path}`,    prerender: {      enabled: true,    },  })));export default defineConfig({  plugins: [    // ... 기타 플러그인    tanstackStart({      // ... 기타 설정      sitemap: {        enabled: false,      },      prerender: {        enabled: true,        crawlLinks: false,        concurrency: 10,      },      pages: localizedPages,    }),  ],});

그런 다음 generateSitemap 함수를 사용하는 src/routes/sitemap[.]xml.ts 경로를 만듭니다.

src/routes/sitemap[.]xml.ts

코드 복사

코드를 클립보드에 복사

import { createFileRoute } from "@tanstack/solid-router";import { generateSitemap } from "intlayer";const SITE_URL = "http://localhost:3000";export const Route = createFileRoute("/sitemap.xml")({  server: {    handlers: {      GET: async () => {        const sitemap = generateSitemap(          [            { path: "/", changefreq: "daily", priority: 1.0 },            { path: "/about", changefreq: "monthly", priority: 0.8 },          ],          { siteUrl: SITE_URL }        );        return new Response(sitemap, {          headers: { "Content-Type": "application/xml" },        });      },    },  },});

17단계: TypeScript 구성 (선택 사항)

Intlayer는 모듈 보강(module augmentation)을 사용하여 TypeScript의 이점을 얻고 코드베이스를 더 강력하게 만듭니다.

TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.

tsconfig.json

코드 복사

코드를 클립보드에 복사

{  // ... 기존 구성  include: [    // ... 기존 include    ".intlayer/**/*.ts", // 자동 생성된 타입 포함  ],}

Git 구성

Intlayer에 의해 생성된 파일은 무시하는 것이 좋습니다. 이를 통해 Git 저장소에 해당 파일을 커밋하지 않을 수 있습니다.

이렇게 하려면 다음 지침을 .gitignore 파일에 추가하면 됩니다.

.gitignore

코드 복사

코드를 클립보드에 복사

# Intlayer에 의해 생성된 파일 무시.intlayer

VS Code 확장 프로그램

Intlayer 개발 경험을 향상시키기 위해 공식 Intlayer VS Code 확장 프로그램을 설치할 수 있습니다.

VS Code 마켓플레이스에서 설치

이 확장 프로그램은 다음을 제공합니다.

번역 키에 대한 자동 완성
누락된 번역에 대한 실시간 오류 감지
번역된 콘텐츠의 인라인 미리보기
번역을 쉽게 만들고 업데이트할 수 있는 빠른 작업

확장 프로그램 사용 방법에 대한 자세한 내용은 Intlayer VS Code 확장 프로그램 문서를 참조하세요.

더 나아가기

더 나아가려면 비주얼 에디터를 구현하거나 CMS를 사용하여 콘텐츠를 외부화할 수 있습니다.

문서 참조

Tanstack Start

Astro

생성:2025-03-25마지막 업데이트:2026-05-06

GitHub에서 애플리케이션 템플릿 보기

이 페이지에는 애플리케이션 템플릿이 제공됩니다.

쇼케이스 애플리케이션 보기

이 페이지는 템플릿의 라이브 데모로 연결됩니다.

비디오 튜토리얼 보기

이 페이지에는 비디오 튜토리얼이 제공됩니다.

이 문서를 원하는 AI 어시스턴트에 참조하세요

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

이 페이지와 원하는 AI 어시스턴트를 사용하여 문서를 요약합니다

버전 기록

"Solid useIntlayer API 사용법을 직접 속성 액세스로 업데이트"
v8.9.02026. 5. 4.
"Tanstack Start Solid.js용으로 추가됨"
v8.5.12026. 3. 25.

이 페이지의 콘텐츠는 AI를 사용하여 번역되었습니다.

영어 원본 내용의 최신 버전을 보기

문서 수정

이 문서를 개선할 아이디어가 있으시면 GitHub에 풀 리퀘스트를 제출하여 자유롭게 기여해 주세요.

문서에 대한 GitHub 링크

복사

문서의 Markdown을 클립보드에 복사

Intlayer를 사용하여 Solid.js 기반 Tanstack Start 웹사이트 번역하기 | 국제화 (i18n)

Intlayer란 무엇인가요?

Intlayer는 최신 웹 애플리케이션에서 다국어 지원을 단순화하도록 설계된 혁신적인 오픈 소스 국제화(i18n) 라이브러리입니다.

Intlayer를 사용하면 다음을 수행할 수 있습니다.

컴포넌트 수준에서 선언적 딕셔너리를 사용하여 번역을 쉽게 관리할 수 있습니다.
메타데이터, 라우트 및 콘텐츠를 동적으로 로컬라이즈할 수 있습니다.
자동 생성된 타입을 통해 TypeScript 지원을 보장하여 자동 완성 및 오류 감지 기능을 향상시킵니다.
동적 로케일 감지 및 전환과 같은 고급 기능을 활용할 수 있습니다.
Tanstack Start의 파일 기반 라우팅 시스템을 통해 로케일 인식 라우팅을 활성화할 수 있습니다.

Tanstack Start 애플리케이션에서 Intlayer를 설정하기 위한 단계별 가이드

www.youtube.com

GitHub에서 애플리케이션 템플릿을 확인하세요.

1단계: 프로젝트 생성

먼저 TanStack Start 웹사이트의 새 프로젝트 시작 가이드에 따라 새로운 TanStack Start 프로젝트를 생성합니다.

2단계: Intlayer 패키지 설치

선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다.

bash

코드 복사

코드를 클립보드에 복사

npm install intlayer solid-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer solid-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer

구성 관리, 번역, 콘텐츠 선언, 트랜스파일 및 CLI 명령을 위한 국제화 도구를 제공하는 핵심 패키지입니다.
solid-intlayer Intlayer를 Solid 애플리케이션과 통합하는 패키지입니다. Solid 국제화를 위한 컨텍스트 프로바이더와 훅을 제공합니다.
vite-intlayer Intlayer를 Vite 번들러와 통합하기 위한 Vite 플러그인과 사용자의 선호 로케일 감지, 쿠키 관리 및 URL 리디렉션 처리를 위한 미들웨어를 포함합니다.

3단계: 프로젝트 구성

애플리케이션의 언어를 구성하기 위한 구성 파일을 만듭니다.

intlayer.config.ts

코드 복사

코드를 클립보드에 복사

import type { IntlayerConfig } from "intlayer";import { Locales } from "intlayer";const config: IntlayerConfig = {  internationalization: {    defaultLocale: Locales.ENGLISH,    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],  },};export default config;

import type { IntlayerConfig } from "intlayer";import { Locales } from "intlayer";const config: IntlayerConfig = {  internationalization: {    defaultLocale: Locales.ENGLISH,    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],  },};export default config;

이 구성 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔의 Intlayer 로그 비활성화 등을 수행할 수 있습니다. 사용 가능한 전체 매개변수 목록은 구성 문서를 참조하세요.

4단계: Vite 구성에 Intlayer 통합

Vite 구성에 intlayer 플러그인을 추가합니다.

vite.config.ts

코드 복사

코드를 클립보드에 복사

import { intlayer } from "vite-intlayer";import { defineConfig } from "vite";import { devtools } from "@tanstack/devtools-vite";import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solidPlugin from "vite-plugin-solid";export default defineConfig({  plugins: [    devtools(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    solidPlugin({ ssr: true }),    intlayer(),  ],});

import { intlayer } from "vite-intlayer";import { defineConfig } from "vite";import { devtools } from "@tanstack/devtools-vite";import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solidPlugin from "vite-plugin-solid";export default defineConfig({  plugins: [    devtools(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    solidPlugin({ ssr: true }),    intlayer(),  ],});

intlayer() Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 모니터링합니다. Vite 애플리케이션 내에 Intlayer 환경 변수를 정의합니다. 또한 성능 최적화를 위한 별칭(alias)을 제공합니다.

5단계: 루트 레이아웃 생성

useParams를 사용하여 현재 로케일을 감지하고 html 태그에 lang 및 dir 속성을 설정하여 국제화를 지원하도록 루트 레이아웃을 구성합니다.

src/routes/__root.tsx

코드 복사

코드를 클립보드에 복사

import {  HeadContent,  Scripts,  createRootRouteWithContext,} from "@tanstack/solid-router";import { HydrationScript } from "solid-js/web";import { Suspense, type ParentComponent } from "solid-js";import { IntlayerProvider } from "solid-intlayer";import { defaultLocale, getHTMLTextDir } from "intlayer";import { Route as LocaleRoute } from "./{-$locale}/route";export const Route = createRootRouteWithContext()({  shellComponent: RootComponent,});const RootComponent: ParentComponent = (props) => {  const params = LocaleRoute.useParams();  const locale = params()?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      <head>        <HydrationScript />        <HeadContent />      </head>      <body>        <IntlayerProvider locale={locale}>          <Suspense>{props.children}</Suspense>        </IntlayerProvider>        <Scripts />      </body>    </html>  );};

import {  HeadContent,  Scripts,  createRootRouteWithContext,} from "@tanstack/solid-router";import { HydrationScript } from "solid-js/web";import { Suspense, type ParentComponent } from "solid-js";import { IntlayerProvider } from "solid-intlayer";import { defaultLocale, getHTMLTextDir } from "intlayer";import { Route as LocaleRoute } from "./{-$locale}/route";export const Route = createRootRouteWithContext()({  shellComponent: RootComponent,});const RootComponent: ParentComponent = (props) => {  const params = LocaleRoute.useParams();  const locale = params()?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      <head>        <HydrationScript />        <HeadContent />      </head>      <body>        <IntlayerProvider locale={locale}>          <Suspense>{props.children}</Suspense>        </IntlayerProvider>        <Scripts />      </body>    </html>  );};

6단계: 로케일 레이아웃 생성 (선택 사항)

로케일 접두사를 처리하고 유효성 검사를 수행하는 레이아웃을 만듭니다. 이 레이아웃은 유효한 로케일만 처리되도록 보장합니다.

라우트 수준에서 로케일 접두사를 검증할 필요가 없는 경우 이 단계는 선택 사항입니다.

src/routes/{-$locale}/route.tsx

코드 복사

코드를 클립보드에 복사

import { createFileRoute, Outlet, redirect } from "@tanstack/solid-router";import { validatePrefix } from "intlayer";export const Route = createFileRoute("/{-$locale}")({  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // 로케일 접두사 유효성 검사    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },        replace: true,      });    }  },  component: Outlet,});

import { createFileRoute, Outlet, redirect } from "@tanstack/solid-router";import { validatePrefix } from "intlayer";export const Route = createFileRoute("/{-$locale}")({  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // 로케일 접두사 유효성 검사    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },        replace: true,      });    }  },  component: Outlet,});

여기서 {-$locale}은 현재 로케일로 대체되는 동적 라우트 매개변수입니다. 이 표기법은 해당 슬롯을 선택 사항으로 만들어 'prefix-no-default' 등과 같은 라우팅 모드와 함께 작동할 수 있게 합니다.

동일한 라우트에서 여러 동적 세그먼트를 사용하는 경우(예: /{-$locale}/other-path/$anotherDynamicPath/...) 이 슬롯이 문제를 일으킬 수 있음에 유의하세요. 'prefix-all' 모드의 경우 슬롯을 $locale로 전환하는 것을 선호할 수 있습니다. 'no-prefix' 또는 'search-params' 모드의 경우 슬롯을 완전히 제거할 수 있습니다.

7단계: 콘텐츠 선언

번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다.

src/contents/page.content.ts

코드 복사

코드를 클립보드에 복사

import type { Dictionary } from "intlayer";import { t } from "intlayer";const appContent = {  content: {    links: {      about: t({        en: "About",        es: "Acerca de",        fr: "À propos",      }),      home: t({        en: "Home",        es: "Inicio",        fr: "Accueil",      }),    },    meta: {      title: t({        en: "Welcome to Intlayer + TanStack Router",        es: "Bienvenido a Intlayer + TanStack Router",        fr: "Bienvenue à Intlayer + TanStack Router",      }),      description: t({        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",      }),    },  },  key: "app",} satisfies Dictionary;export default appContent;

import type { Dictionary } from "intlayer";import { t } from "intlayer";const appContent = {  content: {    links: {      about: t({        en: "About",        es: "Acerca de",        fr: "À propos",      }),      home: t({        en: "Home",        es: "Inicio",        fr: "Accueil",      }),    },    meta: {      title: t({        en: "Welcome to Intlayer + TanStack Router",        es: "Bienvenido a Intlayer + TanStack Router",        fr: "Bienvenue à Intlayer + TanStack Router",      }),      description: t({        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",      }),    },  },  key: "app",} satisfies Dictionary;export default appContent;

콘텐츠 선언은 contentDir 디렉터리(기본값: ./app)에 포함되어 있고 콘텐츠 선언 파일 확장자(기본값: .content.{json,ts,tsx,js,jsx,mjs,cjs})와 일치하는 경우 애플리케이션 어디에서나 정의할 수 있습니다.

자세한 내용은 콘텐츠 선언 문서를 참조하세요.

8단계: 로케일 인식 컴포넌트 및 훅 활용

로케일 인식 내비게이션을 위해 LocalizedLink 컴포넌트를 만듭니다.

src/components/LocalizedLink.tsx

코드 복사

코드를 클립보드에 복사

import { Link, type LinkProps } from "@tanstack/solid-router";import { getPrefix } from "intlayer";import { useLocale } from "solid-intlayer";import type { JSX } from "solid-js";export const LOCALE_ROUTE = "{-$locale}" as const;export type RemoveLocaleParam<TVal> = TVal extends string  ? RemoveLocaleFromString<TVal>  : TVal;export type To = RemoveLocaleParam<LinkProps["to"]>;type CollapseDoubleSlashes<TString extends string> =  TString extends `${infer THead}//${infer TTail}`    ? CollapseDoubleSlashes<`${THead}/${TTail}`>    : TString;export type LocalizedLinkProps = Omit<LinkProps, "to"> & {  to?: To;} & JSX.AnchorHTMLAttributes<HTMLAnchorElement>;type RemoveAll<  TString extends string,  TSub extends string,> = TString extends `${infer THead}${TSub}${infer TTail}`  ? RemoveAll<`${THead}${TTail}`, TSub>  : TString;type RemoveLocaleFromString<TString extends string> = CollapseDoubleSlashes<  RemoveAll<TString, typeof LOCALE_ROUTE>>;export const LocalizedLink = (props: LocalizedLinkProps) => {  const { locale } = useLocale();  return (    <Link      {...props}      params={{        locale: getPrefix(locale()).localePrefix,        ...(typeof props.params === "object" ? props.params : {}),      }}      to={`/${LOCALE_ROUTE}${props.to ?? ""}` as LinkProps["to"]}    />  );};

import { Link, type LinkProps } from "@tanstack/solid-router";import { getPrefix } from "intlayer";import { useLocale } from "solid-intlayer";import type { JSX } from "solid-js";export const LOCALE_ROUTE = "{-$locale}" as const;export type RemoveLocaleParam<TVal> = TVal extends string  ? RemoveLocaleFromString<TVal>  : TVal;export type To = RemoveLocaleParam<LinkProps["to"]>;type CollapseDoubleSlashes<TString extends string> =  TString extends `${infer THead}//${infer TTail}`    ? CollapseDoubleSlashes<`${THead}/${TTail}`>    : TString;export type LocalizedLinkProps = Omit<LinkProps, "to"> & {  to?: To;} & JSX.AnchorHTMLAttributes<HTMLAnchorElement>;type RemoveAll<  TString extends string,  TSub extends string,> = TString extends `${infer THead}${TSub}${infer TTail}`  ? RemoveAll<`${THead}${TTail}`, TSub>  : TString;type RemoveLocaleFromString<TString extends string> = CollapseDoubleSlashes<  RemoveAll<TString, typeof LOCALE_ROUTE>>;export const LocalizedLink = (props: LocalizedLinkProps) => {  const { locale } = useLocale();  return (    <Link      {...props}      params={{        locale: getPrefix(locale()).localePrefix,        ...(typeof props.params === "object" ? props.params : {}),      }}      to={`/${LOCALE_ROUTE}${props.to ?? ""}` as LinkProps["to"]}    />  );};

이 컴포넌트는 두 가지 목적을 가집니다.

URL에서 불필요한 {-$locale} 접두사를 제거합니다.
사용자가 로컬라이즈된 라우트로 직접 리디렉션되도록 로케일 매개변수를 URL에 주입합니다.

그런 다음 프로그래밍 방식의 내비게이션을 위해 useLocalizedNavigate 훅을 만들 수 있습니다.

src/hooks/useLocalizedNavigate.tsx

코드 복사

코드를 클립보드에 복사

import { useNavigate } from "@tanstack/solid-router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";export const useLocalizedNavigate = () => {  const navigate = useNavigate();  const { locale } = useLocale();  const localizedNavigate = (to: string) => {    const localizedTo = getLocalizedUrl(to, locale());    return navigate({ to: localizedTo });  };  return localizedNavigate;};

import { useNavigate } from "@tanstack/solid-router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";export const useLocalizedNavigate = () => {  const navigate = useNavigate();  const { locale } = useLocale();  const localizedNavigate = (to: string) => {    const localizedTo = getLocalizedUrl(to, locale());    return navigate({ to: localizedTo });  };  return localizedNavigate;};

9단계: 페이지에서 Intlayer 사용

애플리케이션 전체에서 콘텐츠 딕셔너리에 접근하세요.

로컬라이즈된 홈 페이지

src/routes/{-$locale}/index.tsx

코드 복사

코드를 클립보드에 복사

import { createFileRoute } from "@tanstack/solid-router";import { useIntlayer } from "solid-intlayer";import { LocalizedLink } from "@/components/LocalizedLink";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,});function RouteComponent() {  const content = useIntlayer("index-page");  return (    <main>      <h1>{content.heroTitle}</h1>      <p>{content.heroDesc}</p>      <div>        <LocalizedLink to="/">{content.navHome}</LocalizedLink>        <LocalizedLink to="/about">{content.navAbout}</LocalizedLink>      </div>    </main>  );}

import { createFileRoute } from "@tanstack/solid-router";import { useIntlayer } from "solid-intlayer";import { LocalizedLink } from "@/components/LocalizedLink";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,});function RouteComponent() {  const content = useIntlayer("index-page");  return (    <main>      <h1>{content.heroTitle}</h1>      <p>{content.heroDesc}</p>      <div>        <LocalizedLink to="/">{content.navHome}</LocalizedLink>        <LocalizedLink to="/about">{content.navAbout}</LocalizedLink>      </div>    </main>  );}

콘텐츠를 alt, title, href, aria-label 등과 같은 string 속성에서 사용하려면, 함수의 값을 호출해야 합니다. 예를 들어:

html

코드 복사

코드를 클립보드에 복사

<img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

<img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

Solid에서 useIntlayer는 반응형 콘텐츠(예: content)를 반환합니다. 그 속성에 직접 액세스할 수 있습니다.

useIntlayer 훅에 대해 자세히 알아보려면 문서를 참조하세요.

10단계: 로케일 스위처 컴포넌트 생성

사용자가 언어를 변경할 수 있도록 하는 컴포넌트를 만듭니다.

src/components/LocaleSwitcher.tsx

코드 복사

코드를 클립보드에 복사

import { useLocation } from "@tanstack/solid-router";import { getLocaleName, getPathWithoutLocale, getPrefix } from "intlayer";import { For } from "solid-js";import { useIntlayer, useLocale } from "solid-intlayer";import { LocalizedLink, type To } from "./LocalizedLink";export const LocaleSwitcher = () => {  const content = useIntlayer("locale-switcher");  const location = useLocation();  const { availableLocales, locale, setLocale } = useLocale();  const pathWithoutLocale = () => getPathWithoutLocale(location().pathname);  return (    <div class="flex flex-row gap-2">      <For each={availableLocales}>        {(localeEl) => (          <LocalizedLink            aria-current={localeEl === locale() ? "page" : undefined}            onClick={() => setLocale(localeEl)}            params={{ locale: getPrefix(localeEl).localePrefix }}            to={pathWithoutLocale() as To}          >            {getLocaleName(localeEl)}          </LocalizedLink>        )}      </For>    </div>  );};export default LocaleSwitcher;

import { useLocation } from "@tanstack/solid-router";import { getLocaleName, getPathWithoutLocale, getPrefix } from "intlayer";import { For } from "solid-js";import { useIntlayer, useLocale } from "solid-intlayer";import { LocalizedLink, type To } from "./LocalizedLink";export const LocaleSwitcher = () => {  const content = useIntlayer("locale-switcher");  const location = useLocation();  const { availableLocales, locale, setLocale } = useLocale();  const pathWithoutLocale = () => getPathWithoutLocale(location().pathname);  return (    <div class="flex flex-row gap-2">      <For each={availableLocales}>        {(localeEl) => (          <LocalizedLink            aria-current={localeEl === locale() ? "page" : undefined}            onClick={() => setLocale(localeEl)}            params={{ locale: getPrefix(localeEl).localePrefix }}            to={pathWithoutLocale() as To}          >            {getLocaleName(localeEl)}          </LocalizedLink>        )}      </For>    </div>  );};export default LocaleSwitcher;

Solid에서 useLocale의 locale은 시그널 접근자입니다. 현재 값을 반응형으로 읽으려면 locale()(괄호 포함)을 사용하세요.

useLocale 훅에 대해 자세히 알아보려면 문서를 참조하세요.

11단계: HTML 속성 관리

src/routes/__root.tsx

코드 복사

코드를 클립보드에 복사

const RootComponent: ParentComponent = (props) => {  const params = LocaleRoute.useParams();  const locale = params()?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      {/* ... */}    </html>  );};

const RootComponent: ParentComponent = (props) => {  const params = LocaleRoute.useParams();  const locale = params()?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      {/* ... */}    </html>  );};

12단계: 미들웨어 추가 (선택 사항)

프로덕션에서 intlayerProxy를 사용하려면 vite-intlayer 패키지를 devDependencies에서 dependencies로 변경해야 합니다.

vite.config.ts

코드 복사

코드를 클립보드에 복사

import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solid from "vite-plugin-solid";import { nitro } from "nitro/vite";import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";export default defineConfig({  plugins: [    intlayerProxy(), // Nitro를 사용하는 경우 프록시는 서버 앞에 배치되어야 합니다.    nitro(),    intlayer(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    solid(),  ],});

import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solid from "vite-plugin-solid";import { nitro } from "nitro/vite";import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";export default defineConfig({  plugins: [    intlayerProxy(), // Nitro를 사용하는 경우 프록시는 서버 앞에 배치되어야 합니다.    nitro(),    intlayer(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    solid(),  ],});

12단계: 메타데이터 국제화 (선택 사항)

로케일 인식 메타데이터를 위해 head 로더 내에서 getIntlayer 함수를 사용하여 콘텐츠 딕셔너리에 접근할 수도 있습니다.

src/routes/{-$locale}/index.tsx

코드 복사

코드를 클립보드에 복사

import { createFileRoute } from "@tanstack/solid-router";import { getIntlayer } from "intlayer";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,  head: ({ params }) => {    const { locale } = params;    const path = "/"; // The path for this route    const metaContent = getIntlayer("app", locale);    return {      links: [        // Canonical link: Points to the current localized page        { rel: "canonical", href: getLocalizedUrl(path, locale) },        // Hreflang: Tell Google about all localized versions        ...localeMap(({ locale: mapLocale }) => ({          rel: "alternate",          hrefLang: mapLocale,          href: getLocalizedUrl(path, mapLocale),        })),        // x-default: For users in unmatched languages        // Define the default fallback locale (usually your primary language)        {          rel: "alternate",          hrefLang: "x-default",          href: getLocalizedUrl(path, defaultLocale),        },      ],      meta: [        { title: metaContent.title },        { name: "description", content: metaContent.meta.description },      ],    };  },});

import { createFileRoute } from "@tanstack/solid-router";import { getIntlayer } from "intlayer";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,  head: ({ params }) => {    const { locale } = params;    const path = "/"; // The path for this route    const metaContent = getIntlayer("app", locale);    return {      links: [        // Canonical link: Points to the current localized page        { rel: "canonical", href: getLocalizedUrl(path, locale) },        // Hreflang: Tell Google about all localized versions        ...localeMap(({ locale: mapLocale }) => ({          rel: "alternate",          hrefLang: mapLocale,          href: getLocalizedUrl(path, mapLocale),        })),        // x-default: For users in unmatched languages        // Define the default fallback locale (usually your primary language)        {          rel: "alternate",          hrefLang: "x-default",          href: getLocalizedUrl(path, defaultLocale),        },      ],      meta: [        { title: metaContent.title },        { name: "description", content: metaContent.meta.description },      ],    };  },});

13단계: 서버 액션에서 로케일 검색 (선택 사항)

서버 액션이나 API 엔드포인트 내에서 현재 로케일에 접근하고 싶을 수 있습니다. intlayer의 getLocale 헬퍼를 사용하여 이를 수행할 수 있습니다.

다음은 TanStack Start의 서버 함수를 사용하는 예입니다.

src/routes/{-$locale}/index.tsx

코드 복사

코드를 클립보드에 복사

import { createServerFn } from "@tanstack/solid-start";import {  getRequestHeader,  getRequestHeaders,} from "@tanstack/solid-start/server";import { getCookie, getIntlayer, getLocale } from "intlayer";export const getLocaleServer = createServerFn().handler(async () => {  const locale = await getLocale({    // 요청에서 쿠키를 가져옵니다 (기본값: 'INTLAYER_LOCALE')    getCookie: (name) => {      const cookieString = getRequestHeader("cookie");      return getCookie(name, cookieString);    },    // 요청에서 헤더를 가져옵니다 (기본값: 'x-intlayer-locale')    // Accept-Language 협상을 사용한 폴백    getHeader: (name) => getRequestHeader(name),  });  // getIntlayer()를 사용하여 콘텐츠 검색  const content = getIntlayer("app", locale);  return { locale, content };});

import { createServerFn } from "@tanstack/solid-start";import {  getRequestHeader,  getRequestHeaders,} from "@tanstack/solid-start/server";import { getCookie, getIntlayer, getLocale } from "intlayer";export const getLocaleServer = createServerFn().handler(async () => {  const locale = await getLocale({    // 요청에서 쿠키를 가져옵니다 (기본값: 'INTLAYER_LOCALE')    getCookie: (name) => {      const cookieString = getRequestHeader("cookie");      return getCookie(name, cookieString);    },    // 요청에서 헤더를 가져옵니다 (기본값: 'x-intlayer-locale')    // Accept-Language 협상을 사용한 폴백    getHeader: (name) => getRequestHeader(name),  });  // getIntlayer()를 사용하여 콘텐츠 검색  const content = getIntlayer("app", locale);  return { locale, content };});

14단계: 찾을 수 없는 페이지 관리 (선택 사항)

로케일 접두사가 있는 TanStack Router의 404 처리 이해하기

TanStack Router에서 로컬라이즈된 라우트를 사용하여 404 페이지를 처리하려면 다층적인 접근 방식이 필요합니다.

전용 404 라우트: 404 UI를 표시하는 특정 라우트
라우트 수준 유효성 검사: 로케일 접두사를 구문 분석하고 잘못된 접두사를 404로 리디렉션
Catch-all 라우트: 로케일 세그먼트 내에서 일치하지 않는 모든 경로를 캡처

src/routes/{-$locale}/404.tsx

코드 복사

코드를 클립보드에 복사

import { createFileRoute } from "@tanstack/solid-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 } from "@tanstack/solid-router";// 전용 /[locale]/404 라우트를 생성합니다.// 직접 라우트로 사용되거나 다른 파일에서 컴포넌트로 임포트되어 사용됩니다.export const Route = createFileRoute("/{-$locale}/404")({  component: NotFoundComponent,});// notFoundComponent 및 catch-all 라우트에서 재사용할 수 있도록 별도로 내보냅니다.export function NotFoundComponent() {  return (    <div>      <h1>404</h1>    </div>  );}

src/routes/{-$locale}/route.tsx

코드 복사

코드를 클립보드에 복사

import { createFileRoute, Outlet, redirect } from "@tanstack/solid-router";import { validatePrefix } from "intlayer";import { NotFoundComponent } from "./404";export const Route = createFileRoute("/{-$locale}")({  // beforeLoad는 라우트가 렌더링되기 전에 실행됩니다(서버와 클라이언트 모두 해당).  // 로케일 접두사를 유효성 검사하기에 가장 이상적인 장소입니다.  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // validatePrefix는 intlayer 구성을 기반으로 로케일이 유효한지 확인합니다.    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      // 잘못된 로케일 접두사 - 유효한 로케일 접두사를 사용하여 404 페이지로 리디렉션      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },      });    }  },  component: Outlet,  // notFoundComponent는 하위 라우트가 존재하지 않을 때 호출됩니다.  // 예: /en/존재하지-않는-페이지는 /en 레이아웃 내에서 이를 트리거합니다.  notFoundComponent: NotFoundComponent,});

import { createFileRoute, Outlet, redirect } from "@tanstack/solid-router";import { validatePrefix } from "intlayer";import { NotFoundComponent } from "./404";export const Route = createFileRoute("/{-$locale}")({  // beforeLoad는 라우트가 렌더링되기 전에 실행됩니다(서버와 클라이언트 모두 해당).  // 로케일 접두사를 유효성 검사하기에 가장 이상적인 장소입니다.  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // validatePrefix는 intlayer 구성을 기반으로 로케일이 유효한지 확인합니다.    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      // 잘못된 로케일 접두사 - 유효한 로케일 접두사를 사용하여 404 페이지로 리디렉션      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },      });    }  },  component: Outlet,  // notFoundComponent는 하위 라우트가 존재하지 않을 때 호출됩니다.  // 예: /en/존재하지-않는-페이지는 /en 레이아웃 내에서 이를 트리거합니다.  notFoundComponent: NotFoundComponent,});

src/routes/{-$locale}/$.tsx

코드 복사

코드를 클립보드에 복사

import { createFileRoute } from "@tanstack/solid-router";import { NotFoundComponent } from "./404";// $ (splat/catch-all) 라우트는 다른 라우트와 일치하지 않는 모든 경로와 일치합니다.// 예: /en/some/deeply/nested/invalid/path// 이를 통해 로케일 내의 모든 일치하지 않는 경로가 404 페이지를 표시하도록 보장합니다.// 이것이 없으면 일치하지 않는 깊은 경로가 빈 페이지나 오류를 표시할 수 있습니다.export const Route = createFileRoute("/{-$locale}/$")({  component: NotFoundComponent,});

import { createFileRoute } from "@tanstack/solid-router";import { NotFoundComponent } from "./404";// $ (splat/catch-all) 라우트는 다른 라우트와 일치하지 않는 모든 경로와 일치합니다.// 예: /en/some/deeply/nested/invalid/path// 이를 통해 로케일 내의 모든 일치하지 않는 경로가 404 페이지를 표시하도록 보장합니다.// 이것이 없으면 일치하지 않는 깊은 경로가 빈 페이지나 오류를 표시할 수 있습니다.export const Route = createFileRoute("/{-$locale}/$")({  component: NotFoundComponent,});

15단계: 컴포넌트의 콘텐츠 추출 (선택 사항)

기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 것은 시간이 많이 걸릴 수 있습니다.

이 프로세스를 쉽게 하기 위해 Intlayer는 컴포넌트를 변환하고 콘텐츠를 추출하는 컴파일러 / 추출기를 제안합니다.

이를 설정하려면 intlayer.config.ts 파일에 compiler 섹션을 추가하면 됩니다.

intlayer.config.ts

코드 복사

코드를 클립보드에 복사

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... 나머지 구성
  compiler: {
    /**
     * 컴파일러 사용 여부를 나타냅니다.
     */
    enabled: true,

    /**
     * 출력 파일 경로를 정의합니다.
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * 변환된 후 컴포넌트를 저장할지 여부를 나타냅니다.
     *
     * - `true`인 경우 컴파일러는 디스크의 컴포넌트 파일을 다시 씁니다. 따라서 변환은 영구적이 되고 컴파일러는 다음 프로세스에서 변환을 건너뜁니다. 이렇게 하면 컴파일러가 앱을 변환한 다음 제거할 수 있습니다.
     *
     * - `false`인 경우 컴파일러는 빌드 출력 코드에만 `useIntlayer()` 함수 호출을 주입하고 기본 코드베이스는 그대로 유지합니다. 변환은 메모리에서만 수행됩니다.
     */
    saveComponents: false,

    /**
     * 딕셔너리 키 접두사
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

추출기를 실행하여 컴포넌트를 변환하고 콘텐츠를 추출하세요.

bash

코드 복사

코드를 클립보드에 복사

npx intlayer extract

npx intlayer extract

intlayerCompiler 플러그인을 포함하도록 vite.config.ts를 업데이트하세요.

vite.config.ts

코드 복사

코드를 클립보드에 복사

import { intlayer, intlayerCompiler } from "vite-intlayer";import { defineConfig } from "vite";import { devtools } from "@tanstack/devtools-vite";import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solidPlugin from "vite-plugin-solid";export default defineConfig({ plugins: [   devtools(),   tanstackStart({     router: {       routeFileIgnorePattern:         ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",     },   }),   solidPlugin({ ssr: true }),   intlayer(),   intlayerCompiler(), ],});

import { intlayer, intlayerCompiler } from "vite-intlayer";import { defineConfig } from "vite";import { devtools } from "@tanstack/devtools-vite";import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solidPlugin from "vite-plugin-solid";export default defineConfig({ plugins: [   devtools(),   tanstackStart({     router: {       routeFileIgnorePattern:         ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",     },   }),   solidPlugin({ ssr: true }),   intlayer(),   intlayerCompiler(), ],});

bash

코드 복사

코드를 클립보드에 복사

npm run build # 또는 npm run dev

npm run build # 또는 npm run dev

16단계: 사이트맵 생성 (선택 사항)

Intlayer에서 생성한 사이트맵은 xhtml:link 네임스페이스(Hreflang XML 확장)를 지원합니다. 원시 URL만 나열하는 기본 사이트맵 생성기와 달리, Intlayer는 페이지의 모든 언어 버전(예: /about, /about?lang=fr, /about?lang=es) 간에 필요한 양방향 링크를 자동으로 생성합니다. 이를 통해 검색 엔진이 올바른 언어 버전을 올바른 사용자에게 색인화하고 제공할 수 있도록 보장합니다.

vite.config.ts

코드 복사

코드를 클립보드에 복사

import { localeMap, localeFlatMap } from "intlayer";// ... 기타 임포트export const pathList = ["", "/about", "/404"];const localizedPages = localeFlatMap(({ urlPrefix }) =>  pathList.map((path) => ({    path: `${urlPrefix}${path}`,    prerender: {      enabled: true,    },  })));export default defineConfig({  plugins: [    // ... 기타 플러그인    tanstackStart({      // ... 기타 설정      sitemap: {        enabled: false,      },      prerender: {        enabled: true,        crawlLinks: false,        concurrency: 10,      },      pages: localizedPages,    }),  ],});

import { localeMap, localeFlatMap } from "intlayer";// ... 기타 임포트export const pathList = ["", "/about", "/404"];const localizedPages = localeFlatMap(({ urlPrefix }) =>  pathList.map((path) => ({    path: `${urlPrefix}${path}`,    prerender: {      enabled: true,    },  })));export default defineConfig({  plugins: [    // ... 기타 플러그인    tanstackStart({      // ... 기타 설정      sitemap: {        enabled: false,      },      prerender: {        enabled: true,        crawlLinks: false,        concurrency: 10,      },      pages: localizedPages,    }),  ],});

그런 다음 generateSitemap 함수를 사용하는 src/routes/sitemap[.]xml.ts 경로를 만듭니다.

src/routes/sitemap[.]xml.ts

코드 복사

코드를 클립보드에 복사

import { createFileRoute } from "@tanstack/solid-router";import { generateSitemap } from "intlayer";const SITE_URL = "http://localhost:3000";export const Route = createFileRoute("/sitemap.xml")({  server: {    handlers: {      GET: async () => {        const sitemap = generateSitemap(          [            { path: "/", changefreq: "daily", priority: 1.0 },            { path: "/about", changefreq: "monthly", priority: 0.8 },          ],          { siteUrl: SITE_URL }        );        return new Response(sitemap, {          headers: { "Content-Type": "application/xml" },        });      },    },  },});

import { createFileRoute } from "@tanstack/solid-router";import { generateSitemap } from "intlayer";const SITE_URL = "http://localhost:3000";export const Route = createFileRoute("/sitemap.xml")({  server: {    handlers: {      GET: async () => {        const sitemap = generateSitemap(          [            { path: "/", changefreq: "daily", priority: 1.0 },            { path: "/about", changefreq: "monthly", priority: 0.8 },          ],          { siteUrl: SITE_URL }        );        return new Response(sitemap, {          headers: { "Content-Type": "application/xml" },        });      },    },  },});

17단계: TypeScript 구성 (선택 사항)

Intlayer는 모듈 보강(module augmentation)을 사용하여 TypeScript의 이점을 얻고 코드베이스를 더 강력하게 만듭니다.

TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.

tsconfig.json

코드 복사

코드를 클립보드에 복사

{  // ... 기존 구성  include: [    // ... 기존 include    ".intlayer/**/*.ts", // 자동 생성된 타입 포함  ],}

{  // ... 기존 구성  include: [    // ... 기존 include    ".intlayer/**/*.ts", // 자동 생성된 타입 포함  ],}

Git 구성

Intlayer에 의해 생성된 파일은 무시하는 것이 좋습니다. 이를 통해 Git 저장소에 해당 파일을 커밋하지 않을 수 있습니다.

이렇게 하려면 다음 지침을 .gitignore 파일에 추가하면 됩니다.

.gitignore

코드 복사

코드를 클립보드에 복사

# Intlayer에 의해 생성된 파일 무시.intlayer

# Intlayer에 의해 생성된 파일 무시.intlayer

VS Code 확장 프로그램

Intlayer 개발 경험을 향상시키기 위해 공식 Intlayer VS Code 확장 프로그램을 설치할 수 있습니다.

VS Code 마켓플레이스에서 설치

이 확장 프로그램은 다음을 제공합니다.

번역 키에 대한 자동 완성
누락된 번역에 대한 실시간 오류 감지
번역된 콘텐츠의 인라인 미리보기
번역을 쉽게 만들고 업데이트할 수 있는 빠른 작업

확장 프로그램 사용 방법에 대한 자세한 내용은 Intlayer VS Code 확장 프로그램 문서를 참조하세요.

더 나아가기

더 나아가려면 비주얼 에디터를 구현하거나 CMS를 사용하여 콘텐츠를 외부화할 수 있습니다.

문서 참조

Tanstack Start

Astro

버전 기록

Intlayer를 사용하여 Solid.js 기반 Tanstack Start 웹사이트 번역하기 | 국제화 (i18n)

목차

Intlayer란 무엇인가요?

Tanstack Start 애플리케이션에서 Intlayer를 설정하기 위한 단계별 가이드

1단계: 프로젝트 생성

2단계: Intlayer 패키지 설치

3단계: 프로젝트 구성

4단계: Vite 구성에 Intlayer 통합

5단계: 루트 레이아웃 생성

6단계: 로케일 레이아웃 생성 (선택 사항)

7단계: 콘텐츠 선언

8단계: 로케일 인식 컴포넌트 및 훅 활용

9단계: 페이지에서 Intlayer 사용

로컬라이즈된 홈 페이지

10단계: 로케일 스위처 컴포넌트 생성

11단계: HTML 속성 관리

12단계: 미들웨어 추가 (선택 사항)

12단계: 메타데이터 국제화 (선택 사항)

13단계: 서버 액션에서 로케일 검색 (선택 사항)

14단계: 찾을 수 없는 페이지 관리 (선택 사항)

로케일 접두사가 있는 TanStack Router의 404 처리 이해하기

15단계: 컴포넌트의 콘텐츠 추출 (선택 사항)

16단계: 사이트맵 생성 (선택 사항)

17단계: TypeScript 구성 (선택 사항)

Git 구성

VS Code 확장 프로그램

더 나아가기

문서 참조

버전 기록

Intlayer를 사용하여 Solid.js 기반 Tanstack Start 웹사이트 번역하기 | 국제화 (i18n)

목차

Intlayer란 무엇인가요?

Tanstack Start 애플리케이션에서 Intlayer를 설정하기 위한 단계별 가이드

1단계: 프로젝트 생성

2단계: Intlayer 패키지 설치

3단계: 프로젝트 구성

4단계: Vite 구성에 Intlayer 통합

5단계: 루트 레이아웃 생성

6단계: 로케일 레이아웃 생성 (선택 사항)

7단계: 콘텐츠 선언

8단계: 로케일 인식 컴포넌트 및 훅 활용

9단계: 페이지에서 Intlayer 사용

로컬라이즈된 홈 페이지

10단계: 로케일 스위처 컴포넌트 생성

11단계: HTML 속성 관리

12단계: 미들웨어 추가 (선택 사항)

12단계: 메타데이터 국제화 (선택 사항)

13단계: 서버 액션에서 로케일 검색 (선택 사항)

14단계: 찾을 수 없는 페이지 관리 (선택 사항)

로케일 접두사가 있는 TanStack Router의 404 처리 이해하기

15단계: 컴포넌트의 콘텐츠 추출 (선택 사항)

16단계: 사이트맵 생성 (선택 사항)

17단계: TypeScript 구성 (선택 사항)

Git 구성

VS Code 확장 프로그램

더 나아가기

문서 참조