Intlayer를 사용하여 Astro 사이트 번역하기 | 국제화 (i18n)

목차

대안보다 Intlayer를 선택해야 하는 이유는 무엇입니까?

'astro-i18n' 또는 'i18next'와 같은 주요 솔루션과 비교할 때 Intlayer는 다음과 같은 통합 최적화가 제공되는 솔루션입니다.

Astro에서 Intlayer 설정을 위한 단계별 가이드

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

1. 1

   종속성 설치

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

   bash

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   npx intlayer init --interactive
   

   --interactive 플래그는 선택 사항입니다. AI 에이전트인 경우 intlayer-cli init을 사용하세요.

   이 명령어는 당신의 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:

   bash

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   npm install intlayer astro-intlayer
   

   • intlayer 설정 관리, 번역, 콘텐츠 선언, 트랜스파일 및 CLI 명령어를 위한 국제화 도구를 제공하는 핵심 패키지입니다.

   • astro-intlayer Intlayer를 Vite 번들러와 통합하기 위한 Astro 통합 플러그인, 모든 요청의 로케일을 Astro.locals.intlayer로 확인하는 미들웨어, useIntlayer / useDictionary / useLocale 훅이 포함되어 있습니다. 동일한 import 경로가 .astro 프론트매터에서는 서버 구현체로, <script> 블록에서는 클라이언트 구현체(vanilla-intlayer 기반)로 확인됩니다.

2. 2

   프로젝트 설정

   아키텍처

   이 아키텍처에서 astro.config.ts에 등록된 intlayer() 통합은 사전을 빌드하고 모든 요청의 로케일을 확인하여 Astro.locals.intlayer에 노출하는 미들웨어를 추가합니다. 페이지는 src/pages/[...locale]/ 나머지(rest) 세그먼트 아래에 위치하므로 기본 로케일은 접두사 없이 제공되고 다른 모든 로케일은 전용 URL을 갖습니다. .astro 파일은 astro-intlayer의 useIntlayer / useLocale 훅을 사용하여 콘텐츠를 읽으며, 콘텐츠 선언은 src/의 컴포넌트와 함께 배치됩니다.

   bash

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   .
   ├── src
   │   ├── app.content.tsx               # App content declaration
   │   ├── components
   │   │   └── LocaleSwitcher.astro      # Locale switcher component
   │   └── pages
   │       ├── [...locale]
   │       │   └── index.astro           # Localized page (rest param also serves the default locale)
   │       ├── robots.txt.ts             # robots.txt endpoint
   │       └── sitemap.xml.ts            # Localized sitemap endpoint
   ├── astro.config.ts                   # Astro config with the intlayer() integration
   ├── intlayer.config.ts
   ├── package.json
   └── tsconfig.json
   

   설정

   애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:

   intlayer.config.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

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

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

3. 3

   Astro 설정에 Intlayer 통합

   Astro 설정에 intlayer 플러그인을 추가합니다.

   astro.config.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   // @ts-check
   
   import { intlayer } from "astro-intlayer";
   import { defineConfig } from "astro/config";
   
   // https://astro.build/config
   export default defineConfig({
     integrations: [intlayer()],
   });
   

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

4. 4

   콘텐츠 선언

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

   src/app.content.tsx

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { t, type Dictionary } from "intlayer";
   import type { ReactNode } from "react";
   
   const appContent = {
     key: "app",
     content: {
       title: t({
         en: "Hello World",
         fr: "Bonjour le monde",
         es: "Hola mundo",
         ko: "안녕하세요",
       }),
     },
   } satisfies Dictionary;
   
   export default appContent;
   

   콘텐츠 선언은 contentDir(기본값 ./src)에 포함되어 있고 콘텐츠 선언 파일 확장자(기본값 .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml})와 일치한다면 애플리케이션 어디에서나 정의할 수 있습니다.

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

5. 5

   Astro에서 콘텐츠 사용

   astro-intlayer에서 내보낸 훅을 사용하여 .astro 파일에서 사전을 사용하세요. 이 훅들은 react-intlayer와 동일한 시그니처를 공유합니다. useIntlayer("key")는 사전의 내용을 반환하고 useLocale()은 인수를 전달할 필요 없이 현재 로케일을 반환합니다.

   로케일은 통합 플러그인이 자체 src/middleware.ts보다 먼저 등록하는 astro-intlayer 미들웨어에서 제공됩니다. URL 접두사, 클라이언트가 저장한 로케일(쿠키 또는 헤더), Accept-Language 순으로 모든 요청에 대해 로케일을 확인하고 이를 Astro.locals.intlayer에 저장합니다. 사전 렌더링된 페이지는 방문자마다 한 번만 렌더링되므로 URL만 사용합니다.

   또한 각 페이지에 hreflang 및 정식(canonical) 링크와 같은 SEO 메타데이터를 추가하고 사용자가 언어를 변경할 수 있도록 언어 전환기를 포함해야 합니다.

   src/pages/index.astro

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   ---
   import { useIntlayer, useLocale } from "astro-intlayer";
   import {
     getLocalizedUrl,
     defaultLocale,
     localeMap,
     getHTMLTextDir,
   } from "intlayer";
   import LocaleSwitcher from "../components/LocaleSwitcher.astro";
   
   // 미들웨어에 의해 확인된 로케일 (예: /ko/about -> 'ko')
   const { locale } = useLocale();
   
   // 해당 로케일의 'app' 사전 내용
   const { title } = useIntlayer("app");
   ---
   
   <!doctype html>
   <html lang={locale} dir={getHTMLTextDir(locale)}>
     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width" />
       <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
       <title>{title}</title>
   
       <!-- Canonical link: Tells search engines which is the primary version of this page -->
       <link
         rel="canonical"
         href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}
       />
   
       <!-- Hreflang: Tell Google about all localized versions -->
       {
         localeMap(({ locale: mapLocale }) => (
           <link
             rel="alternate"
             hreflang={mapLocale}
             href={new URL(
               getLocalizedUrl(Astro.url.pathname, mapLocale),
               Astro.site
             )}
           />
         ))
       }
   
       <!-- x-default: Fallback for users in unmatched languages -->
       <link
         rel="alternate"
         hreflang="x-default"
         href={new URL(
           getLocalizedUrl(Astro.url.pathname, defaultLocale),
           Astro.site
         )}
       />
     </head>
     <body>
       <header>
         <LocaleSwitcher />
       </header>
       <main>
         <h1>{title}</h1>
       </main>
     </body>
   </html>
   

   Astro.locals.intlayer는 자체 미들웨어 및 엔드포인트에 locale, defaultLocale, availableLocales도 노출합니다. 단일 호출에 대해 요청 로케일을 재정의하려면 로케일이나 선택기를 두 번째 인수로 전달하세요(useIntlayer("app", "fr"), useIntlayer("faq", { item: 2 })).

6. 6

   로컬라이즈된 라우팅

   로컬라이즈된 페이지를 제공하기 위해 동적 라우트 세그먼트를 생성합니다(예: src/pages/[locale]/index.astro):

   src/pages/[locale]/index.astro

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   <!-- astro -->
   ---
   import { getIntlayer } from "intlayer";
   
   const { title } = getIntlayer('app');
   ---
   
   <h1>{title}</h1>
   

   Astro 통합은 개발 중에 언어 인식 라우팅 및 환경 정의를 돕는 Vite 미들웨어를 추가합니다. 또한 직접 로직을 작성하거나 intlayer의 getLocalizedUrl과 같은 유틸리티를 사용하여 언어 간 링크를 생성할 수 있습니다.

7. 7

   언어 선택기 추가

   사용자가 언어를 전환할 수 있도록 LocaleSwitcher 컴포넌트를 만들 수 있습니다. 이 컴포넌트는 지원되는 모든 로케일 목록을 표시하고 각 언어로 동일한 페이지에 링크해야 합니다.

   src/components/LocaleSwitcher.astro

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   ---
   import { useLocale } from "astro-intlayer";
   import { getLocaleName, getLocalizedUrl, getPathWithoutLocale } from "intlayer";
   
   const { locale, availableLocales } = useLocale();
   const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
   ---
   
   <nav aria-label="Languages">
     <ul>
       {
         availableLocales.map((localeItem) => (
           <li key={localeItem} class="p-1">
             <a
               href={getLocalizedUrl(pathWithoutLocale, localeItem)}
               data-locale={localeItem}
               aria-current={localeItem === locale ? "page" : undefined}
             >
               {getLocaleName(localeItem)}
             </a>
           </li>
         ))
       }
     </ul>
   </nav>
   
   <script>
     // 브라우저에서는 동일한 import가 클라이언트 구현체로 확인됩니다
     import { useLocale } from "astro-intlayer";
     import { getLocalizedUrl, type LocalesValues } from "intlayer";
   
     // 로케일 쿠키에 선택 사항을 저장한 다음 현지화된 URL로 이동합니다
     const { setLocale } = useLocale({
       onLocaleChange: (newLocale) => {
         window.location.href = getLocalizedUrl(window.location.pathname, newLocale);
       },
     });
   
     const localeLinks = document.querySelectorAll("[data-locale]");
   
     localeLinks.forEach((link) => {
       link.addEventListener("click", (event) => {
         const locale = link.getAttribute("data-locale") as LocalesValues;
   
         event.preventDefault();
         setLocale(locale);
       });
     });
   </script>
   
   <style>
     nav {
       display: flex;
       gap: 1rem;
     }
     ul {
       display: flex;
       list-style: none;
       padding: 0;
       margin: 0;
       gap: 0.5rem;
     }
     a[aria-current="page"] {
       font-weight: bold;
       text-decoration: underline;
     }
   </style>
   

   영속성에 대한 참고 사항: 클라이언트 측 useLocale의 setLocale은 사용자의 언어 설정을 쿠키에 저장합니다. 이를 통해 Intlayer는 선택 사항을 기억하고 향후 방문 시 사용자를 선호하는 언어로 자동 리디렉션할 수 있습니다. 온디맨드 렌더링 페이지(output: 'server' 또는 prerender = false인 어댑터)는 HTML이 전송되기 전에 Intlayer 미들웨어에 의해 리디렉션되며, 정적 파일로 제공되는 사전 렌더링 페이지는 통합 플러그인이 모든 페이지에 삽입하는 작은 스크립트에 의해 리디렉션됩니다. 둘 다 끄려면 routing.enableProxy를 false로 설정하세요. astro dev에서는 routing.enableProxy가 true로 설정되지 않는 한 쿠키가 리디렉션 소스로 무시되므로 오래된 쿠키가 작업 중인 페이지를 가로채지 않습니다.

   서버 / 클라이언트 상호 호환성: astro-intlayer는 프론트매터에서는 서버 훅(Astro.locals 읽기)으로 확인되고, <script> 블록과 아일랜드에서는 vanilla-intlayer의 클라이언트 훅으로 확인되며 동일한 이름과 데이터 구조를 가집니다. setLocale과 onChange는 클라이언트에서만 동작하므로, 클라이언트 스토어를 초기화하려면 클라이언트에서 installIntlayer()를 한 번 호출하세요. astro-intlayer/client는 클라이언트 엔트리를 명시적으로 노출합니다.

8. 8

   Sitemap 및 Robots.txt

   Intlayer는 동적으로 로컬라이즈된 사이트맵과 robots.txt 파일을 생성하기 위한 유틸리티를 제공합니다.

   사이트맵

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

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

   모든 로컬라이즈된 경로를 포함하는 사이트맵을 생성하기 위해 src/pages/sitemap.xml.ts를 생성합니다.

   src/pages/sitemap.xml.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import type { APIRoute } from "astro";
   import { generateSitemap, type SitemapUrlEntry } from "intlayer";
   
   const pathList: SitemapUrlEntry[] = [
     { path: "/", changefreq: "daily", priority: 1.0 },
     { path: "/about", changefreq: "monthly", priority: 0.7 },
   ];
   
   export const GET: APIRoute = async ({ site }) => {
     const xmlOutput = generateSitemap(pathList, {
       siteUrl: "https://example.com",
     });
   
     return new Response(xmlOutput, {
       headers: { "Content-Type": "application/xml" },
     });
   };
   

   Robots.txt

   검색 엔진 크롤링을 제어하기 위해 src/pages/robots.txt.ts를 생성합니다.

   src/pages/robots.txt.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import type { APIRoute } from "astro";
   import { getMultilingualUrls } from "intlayer";
   
   const getAllMultilingualUrls = (urls: string[]) =>
     urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
   
   const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
   
   export const GET: APIRoute = ({ site }) => {
     const robotsTxt = [
       "User-agent: *",
       "Allow: /",
       ...disallowedPaths.map((path) => `Disallow: ${path}`),
       "",
       `Sitemap: ${new URL("/sitemap.xml", site).href}`,
     ].join("\n");
   
     return new Response(robotsTxt, {
       headers: { "Content-Type": "text/plain" },
     });
   };
   

9. 9

   선호하는 프레임워크 계속 사용하기

   선호하는 프레임워크를 사용하여 애플리케이션을 계속 빌드하세요.

   • Intlayer + React: Intlayer with React
   • Intlayer + Vue: Intlayer with Vue
   • Intlayer + Svelte: Intlayer with Svelte
   • Intlayer + Solid: Intlayer with Solid
   • Intlayer + Preact: Intlayer with Preact
   • Intlayer + Lit: Intlayer with Lit
10. 15

    컴포넌트에서 콘텐츠 추출

    선택사항

    기존 codebase가 있다면 수천 개의 파일을 변환하는 것은 시간이 오래 걸릴 수 있습니다.

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

    이를 설정하려면 intlayer.config.ts 파일에 compiler 섹션을 추가할 수 있습니다:

    intlayer.config.ts

    콘텐츠 복사

    코드 복사

    코드를 클립보드에 복사

    import { type IntlayerConfig } from "intlayer";
    
    const config: IntlayerConfig = {
      // ... Rest of your config
      compiler: {
        /**
         * 컴파일러가 활성화되어야 하는지 여부를 나타냅니다.
         */
        enabled: true,
    
        /**
         * 출력 파일 경로를 정의합니다
         */
        output: ({ fileName, extension }) => `./${fileName}${extension}`,
    
        /**
         * 변환 후 컴포넌트를 저장해야 하는지 여부를 나타냅니다.
         *
         * - `true`인 경우, 컴파일러는 디스크의 컴포넌트 파일을 다시 작성합니다. 그러므로 변환은 영구적이고, 컴파일러는 다음 프로세스에서 변환을 건너뜁니다. 이렇게 하면 컴파일러가 앱을 변환할 수 있고, 그 후 제거할 수 있습니다.
         *
         * - `false`인 경우, 컴파일러는 빌드 출력에만 `useIntlayer()` 함수 호출을 주입하고 기본 codebase를 그대로 유지합니다. 변환은 메모리에서만 수행됩니다.
         */
        saveComponents: false,
    
        /**
         * Dictionary 키 접두사
         */
        dictionaryKeyPrefix: "",
      },
    };
    
    export default config;
    

    Extract commandBabel compiler

    extractor를 실행하여 컴포넌트를 변환하고 콘텐츠를 추출합니다

    bash

    콘텐츠 복사

    코드 복사

    코드를 클립보드에 복사

    npx intlayer extract
    

    애플리케이션을 빌드하여 컴포넌트를 변환하고 콘텐츠를 추출합니다.

    bash

    콘텐츠 복사

    코드 복사

    코드를 클립보드에 복사

    npm run build # 또는 npm run dev
    

TypeScript 설정

Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용함으로써 코드베이스를 더 견고하게 만듭니다.

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

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

Git 설정

Intlayer가 생성한 파일은 무시하는 것이 좋습니다. 이를 통해 Git 리포지토리에 커밋되는 것을 방지할 수 있습니다.

무시하려면 .gitignore 파일에 다음 지침을 추가하세요:

# Intlayer가 생성한 파일 무시
.intlayer

VS Code 확장 프로그램

Intlayer 개발 환경을 개선하기 위해 공식 Intlayer VS Code 확장 프로그램을 설치할 수 있습니다.

VS Code Marketplace에서 설치

이 확장 프로그램은 다음 기능을 제공합니다:

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

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

더 알아보기

더 자세히 알고 싶다면 비주얼 에디터를 구현하거나 CMS를 사용하여 콘텐츠를 외부화할 수 있습니다.

자주 묻는 질문