생성:2024-08-14마지막 업데이트:2025-06-29

Edit this doc

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

문서에 대한 GitHub 링크

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

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

좋아하는 AI 어시스턴트를 사용하여 문서를 요약합니다ChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

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

MCP를 AI 어시스턴트에 추가

Intlayer MCP 서버를 통해 ChatGPT, DeepSeek, Cursor, VSCode 등에서 직접 문서를 검색할 수 있습니다.

MCP 서버 문서 보기

복사

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

Intlayer: 웹사이트 번역을 위한 맞춤형 방법

Intlayer는 자바스크립트 개발자를 위해 특별히 설계된 국제화 라이브러리입니다. 코드 어디에서나 콘텐츠를 선언할 수 있도록 허용합니다. 다국어 콘텐츠 선언을 구조화된 사전으로 변환하여 코드에 쉽게 통합할 수 있게 합니다. TypeScript를 사용하여, Intlayer는 개발을 더욱 견고하고 효율적으로 만듭니다.

사용 예시

bash

코드 복사

코드를 클립보드에 복사

.└── Components    └── MyComponent        ├── index.content.ts        └── index.tsx

./Components/MyComponent/index.content.ts

코드 복사

코드를 클립보드에 복사

import { t, type Dictionary } from "intlayer";const componentExampleContent = {  key: "component-example",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),  },} satisfies Dictionary;export default componentExampleContent;

./Components/MyComponent/index.tsx

코드 복사

코드를 클립보드에 복사

import { useIntlayer } from "react-intlayer";// 컴포넌트 예제 정의export const ComponentExample = () => {  const { myTranslatedContent } = useIntlayer("component-example");  return <span>{myTranslatedContent}</span>;};

왜 Intlayer를 선택해야 하나요?

기능	설명
자바스크립트 기반 콘텐츠 관리	자바스크립트의 유연성을 활용하여 콘텐츠를 효율적으로 정의하고 관리하세요.
타입 안전 환경	모든 콘텐츠 정의가 정확하고 오류가 없도록 TypeScript를 활용하세요.
통합된 콘텐츠 파일	번역을 각 구성 요소와 가깝게 유지하여 유지 관리성과 명확성을 향상시킵니다.
간소화된 설정	최소한의 구성으로 빠르게 시작할 수 있으며, 특히 Next.js 프로젝트에 최적화되어 있습니다.
서버 컴포넌트 지원	Next.js 서버 컴포넌트에 완벽하게 적합하며, 원활한 서버 사이드 렌더링을 보장합니다.
향상된 라우팅	복잡한 애플리케이션 구조에 원활하게 적응하는 Next.js 앱 라우팅을 완벽하게 지원합니다.
체계적인 코드베이스	코드베이스를 더 체계적으로 유지하세요: 1 컴포넌트 = 같은 폴더 내 1 개의 사전.
CI 자동 번역	자체 OpenAI API 키를 사용하여 CI에서 번역을 자동으로 채워 L10n 플랫폼이 필요 없도록 합니다.
MCP 서버 통합	IDE 자동화를 위한 MCP(모델 컨텍스트 프로토콜) 서버를 제공하여 개발 환경 내에서 원활한 콘텐츠 관리 및 국제화(i18n) 워크플로우를 가능하게 합니다. 자세히 알아보기.
마크다운 지원	개인정보 처리방침과 같은 다국어 콘텐츠를 위해 마크다운 파일을 가져오고 해석합니다.
무료 시각 편집기 및 CMS	번역 작업을 위해 콘텐츠 작성자와 협업해야 하는 경우 사용할 수 있는 무료 시각 편집기 및 CMS가 제공됩니다. 이를 통해 로컬라이제이션 플랫폼의 필요성을 없애고 코드베이스에서 콘텐츠를 외부화할 수 있습니다.
간소화된 콘텐츠 조회	각 콘텐츠마다 t 함수를 호출할 필요 없이, 단일 훅을 사용하여 모든 콘텐츠를 직접 조회할 수 있습니다.
일관된 구현	클라이언트 및 서버 컴포넌트 모두에 동일한 구현을 사용하며, 각 서버 컴포넌트에 t 함수를 전달할 필요가 없습니다.
트리 쉐이커블 콘텐츠	콘텐츠는 트리 쉐이커블하여 최종 번들을 가볍게 만듭니다.
비차단 정적 렌더링	Intlayer는 next-intl과 달리 정적 렌더링을 차단하지 않습니다.
상호 운용성	react-i18next, next-i18next, next-intl, 및 react-intl와의 상호 운용성을 허용합니다.

문서 이력

5.5.10 - 2025-06-29: 이력 초기화

구성

CLI