의존성 제로MDX 지원SSR를 위한 설계크로스 프레임워크

5배 더 빠르게 렌더링되는 Markdown.

Name: Intlayer Markdown
Rating: 4.92 (64 reviews)
Author: Intlayer

Intlayer는 자체 Markdown 엔진을 제공합니다. 의존성 없이 MDX를 지원하고, 서버에서 파싱하며, React, Next.js, Vue, Svelte, Solid, Preact, Angular에서 네이티브로 렌더링합니다. 더 이상 렌더러를 고를 필요가 없습니다.

문서 읽기 수치 보기

markdown-file.content.md

---key: my-markdown-contentdescription: My content---# My contentHere an example of markdown content

front-matter의 locale 필드를 생략하면 Intlayer는 설정된 기본 로캘을 사용합니다. 언어 접두사 없이 단일 Markdown 파일로 모든 콘텐츠를 유지할 수 있습니다.

파일 구조 예시:

content
└── markdown-file.content.md

markdown-file.en.content.md

---key: my-markdown-contentdescription: My contentlocale: en---# My contentHere an example of markdown content

front-matter의 locale 필드는 콘텐츠의 로캘을 정의합니다. 선택 사항이며, 지정하지 않으면 Intlayer는 기본 로캘을 사용하고 번역이 없을 때의 대체 로캘로도 작동합니다.

파일 구조 예시:

content
├── markdown-file.en.content.md
├── markdown-file.fr.content.md
└── markdown-file.es.content.md

article.content.ts

import { md, file, t, type Dictionary } from 'intlayer';export default {  key: 'article',  content: {    body: t({      en: md(file('./article.en.md')),      fr: md(file('./article.fr.md')),    }),  },} satisfies Dictionary;

md()와 file() 함수를 사용하여 TypeScript, ESM 또는 JSON 딕셔너리 내부에서 Markdown을 직접 선언하고 완벽한 타입 안전성과 함께 번역을 구성할 수 있습니다.

파일 구조 예시:

content
├── article.content.ts
├── article.en.md
└── article.fr.md

의존성 없음

MDX 컴포넌트

타입이 지정된 프론트매터

미사용 시 제거

markdown-to-jsx 대비 5배의 처리량

파서는 캐시된 규칙 우선순위와 증분 lookbehind를 중심으로 다시 작성되어, 규칙마다 다시 스캔하지 않고 문서를 한 번만 순회합니다. 같은 Markdown, 같은 출력, 훨씬 적은 작업량입니다.

Intlayer5×

markdown-to-jsx1×

상대적인 파싱 및 렌더링 처리량이며, 높을수록 좋습니다.

0 kB

앱이 Markdown 노드를 선언하지 않으면 전송되는 양입니다. 렌더러는 빌드 시 제거됩니다.

~55 kB

Suspense 뒤에서 지연 로드되는 파서 청크로, 첫 페인트를 절대 막지 않습니다.

개의 런타임 의존성. 감사할 것도, 동기화할 것도 없습니다.

고를 목록 대신 하나의 엔진

모든 프로젝트는 같은 잡일로 끝납니다. markdown-to-jsx와 marked, remark, MDX를 저울질하고 승자를 연결한 뒤, MDX를 지원하지 않거나 타입이 허술하거나 플러그인 체인이 클라이언트에서 깨진다는 걸 알게 되죠. Intlayer가 그 선택을 대신합니다.

기능

Intlayer

markdown-to-jsx

marked

remark / rehype

@mdx-js

MDX 컴포넌트

IntlayerMDX 컴포넌트지원

markdown-to-jsxMDX 컴포넌트미지원

markedMDX 컴포넌트미지원

remark / rehypeMDX 컴포넌트부분 지원 또는 추가 패키지 필요

@mdx-jsMDX 컴포넌트지원

타입 안전한 노드와 오버라이드

Intlayer타입 안전한 노드와 오버라이드지원

markdown-to-jsx타입 안전한 노드와 오버라이드미지원

marked타입 안전한 노드와 오버라이드부분 지원 또는 추가 패키지 필요

remark / rehype타입 안전한 노드와 오버라이드부분 지원 또는 추가 패키지 필요

@mdx-js타입 안전한 노드와 오버라이드부분 지원 또는 추가 패키지 필요

React 및 Next.js 출력

IntlayerReact 및 Next.js 출력지원

markdown-to-jsxReact 및 Next.js 출력지원

markedReact 및 Next.js 출력미지원

remark / rehypeReact 및 Next.js 출력부분 지원 또는 추가 패키지 필요

@mdx-jsReact 및 Next.js 출력지원

Vue, Svelte, Solid, Preact, Angular

IntlayerVue, Svelte, Solid, Preact, Angular지원

markdown-to-jsxVue, Svelte, Solid, Preact, Angular미지원

markedVue, Svelte, Solid, Preact, Angular부분 지원 또는 추가 패키지 필요

remark / rehypeVue, Svelte, Solid, Preact, Angular부분 지원 또는 추가 패키지 필요

@mdx-jsVue, Svelte, Solid, Preact, Angular부분 지원 또는 추가 패키지 필요

서버 파싱, 클라이언트 렌더링, 재파싱 없음

Intlayer서버 파싱, 클라이언트 렌더링, 재파싱 없음지원

markdown-to-jsx서버 파싱, 클라이언트 렌더링, 재파싱 없음미지원

marked서버 파싱, 클라이언트 렌더링, 재파싱 없음부분 지원 또는 추가 패키지 필요

remark / rehype서버 파싱, 클라이언트 렌더링, 재파싱 없음지원

@mdx-js서버 파싱, 클라이언트 렌더링, 재파싱 없음부분 지원 또는 추가 패키지 필요

플러그인 체인 없이 설정

Intlayer플러그인 체인 없이 설정지원

markdown-to-jsx플러그인 체인 없이 설정지원

marked플러그인 체인 없이 설정부분 지원 또는 추가 패키지 필요

remark / rehype플러그인 체인 없이 설정미지원

@mdx-js플러그인 체인 없이 설정미지원

타입이 지정된 프론트매터 메타데이터

Intlayer타입이 지정된 프론트매터 메타데이터지원

markdown-to-jsx타입이 지정된 프론트매터 메타데이터미지원

marked타입이 지정된 프론트매터 메타데이터미지원

remark / rehype타입이 지정된 프론트매터 메타데이터부분 지원 또는 추가 패키지 필요

@mdx-js타입이 지정된 프론트매터 메타데이터부분 지원 또는 추가 패키지 필요

런타임 의존성 제로

Intlayer런타임 의존성 제로지원

markdown-to-jsx런타임 의존성 제로지원

marked런타임 의존성 제로지원

remark / rehype런타임 의존성 제로미지원

@mdx-js런타임 의존성 제로미지원

미사용 시 번들에서 제거

Intlayer미사용 시 번들에서 제거지원

markdown-to-jsx미사용 시 번들에서 제거미지원

marked미사용 시 번들에서 제거미지원

remark / rehype미사용 시 번들에서 제거미지원

@mdx-js미사용 시 번들에서 제거미지원

지원부분 지원 또는 추가 패키지 필요미지원

remark와 rehype는 대부분을 해내지만, 직접 조립해야 하는 플러그인 체인을 거치며 브라우저와 서버에서 늘 같게 동작하지도 않습니다.
markdown-to-jsx는 React만 렌더링하고, marked는 HTML 문자열을 돌려줍니다. Vue, Svelte, Solid, Angular에는 손에 잡히는 대안이 없습니다.
어느 것도 타입이 지정된 프론트매터를 주지 않습니다. 콘텐츠 레이어를 얹거나 메타데이터를 직접 파싱해야 합니다.

같은 노드를 모든 프레임워크에서

Markdown 노드는 놓인 프레임워크의 네이티브 출력, 즉 JSX나 VNode 또는 HTML 문자열로 변환됩니다. Svelte, Solid, Angular도 뒤늦은 추가가 아니라 일급 대상입니다.

서버에서 파싱하고 클라이언트에서 렌더링

파싱과 렌더링은 별개의 단계입니다. parseMarkdown이 서버에서 직렬화 가능한 AST를 만들고, 브라우저는 이를 JSON으로 받으며, 모든 렌더러가 그대로 받아들입니다. 문서를 두 번 순회하지 않습니다.

서버에서

문서는 한 번만 파싱되어 캐시하거나 스트리밍하거나 저장할 수 있는 JSON이 됩니다.

route.server.ts

import { parseMarkdown } from 'react-intlayer/markdown';export const loader = async () => {  // Walked once, on the server  const ast = parseMarkdown('## My title\n\nLorem Ipsum');  return Response.json({ content: ast });};

클라이언트에서

렌더러는 원본 문자열이든 AST든 받으므로 브라우저는 그리기만 합니다.

Page.tsx

import { useLoaderData } from 'react-router';import { MarkdownRenderer } from 'react-intlayer/markdown';export default function Page() {  const { content } = useLoaderData();  // No re-parsing in the browser  return <MarkdownRenderer content={content} />;}

한 번 설정하고 노드별로 다듬기

프로바이더에 컴포넌트를 선언하면 앱의 모든 Markdown 노드가 이를 사용합니다. 한 노드만 달라야 한다면 use()가 그 노드만 덮어씁니다. 플러그인 체인도, 별도의 빌드 단계도 없습니다.

앱 전체에 적용

AppProvider.tsx

import { MarkdownProvider } from 'react-intlayer/markdown';export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 className="text-3xl">{children}</h1>,      MyButton: (props) => <button {...props} />, // MDX component    }}  >    {children}  </MarkdownProvider>);

개별 노드에 적용

Article.tsx

import { useIntlayer } from 'react-intlayer';const Article = () => {  const { body } = useIntlayer('article');  // Overrides the provider, for this node only  return body.use({    h1: ({ children }) => <h1 className="text-primary">{children}</h1>,  });};

use()는 프로바이더보다, 프로바이더는 기본 렌더러보다 우선합니다.

타입이 지정된 프론트매터, 콘텐츠 레이어 불필요

Markdown 파일의 프론트매터는 문서와 함께 파싱되어 노드에 타입이 지정된 메타데이터 객체로 노출됩니다. 콘텐츠 레이어까지 도입하던 편집용 필드가 자동완성과 함께 그냥 존재합니다.

article.en.content.md

---key: articlelocale: entitle: Shipping i18n Markdownauthor: aymericzip---# Shipping i18n MarkdownHere an example of markdown content.

Article.tsx

const { body } = useIntlayer('article');body.metadata.title; // 'Shipping i18n Markdown'body.metadata.author; // 'aymericzip'body.value; // the raw Markdown string

같은 엔진이 HTML도 파싱합니다

html() 노드도 같은 파이프라인을 지납니다. 태그는 여러분의 컴포넌트로 매핑되며, 타이핑과 오버라이드 규칙도 동일합니다.

HTML 콘텐츠 보기

코드 기반 i18n

리포지토리에 있는 타입 안전한 번역.

TypeScript 또는 JavaScript에서 구성 요소와 함께 콘텐츠를 선언하세요. Intlayer는 타입을 자동으로 생성하여 자동 완성, 유효성 검사 및 즉각적인 피드백을 제공합니다. 더 이상 키 누락이나 문맥 전환이 없습니다.

코딩 시작하기

AI CLI Tool

터미널에서 번역을 자동화하세요.

AI로 JSON 및 Markdown을 감사, 채우기 및 번역하는 CLI.

`npx intlayer fill`을 실행하여 누락된 키를 감지하고 OpenAI, Claude 또는 로컬 모델을 사용하여 번역을 생성하세요. Git 기록을 깨끗하게 유지하고 타입을 안전하게 보호하세요.

CLI 사용해보기

Intlayer TMS

단어당 비용 지불을 중단하세요. AI로 자동화하세요.

Crowdin 및 Lokalise의 오픈소스 및 자체 호스팅 대안. 현대적인 개발자 워크플로우를 위해 구축되었습니다.

코드 또는 시각적 편집기에서 직접 번역을 관리하세요. AI를 활용하여 즉시 번역하세요. 좌석 제한 없이 팀과 협업하세요.

TMS 보기

헤드리스 CMS

로컬 코드와 원격 콘텐츠를 연결하세요.

오버헤드 없이 다국어 콘텐츠를 관리하세요. Intlayer는 로컬 사전과 원격 관리를 상호 연결하여 재구축 없이 핫 업데이트를 위한 Live Sync를 지원합니다. CI/CD를 위한 웹훅을 사용하고 기능 플래그를 관리하세요.

CMS 보기

기능 플래그

기능을 즉시 전환하세요. 배포가 필요 없습니다.

Intlayer 사전은 단순한 텍스트 이상입니다. 로직, 스타일 및 구성 객체를 선언하는 데 사용하세요. Live Sync를 사용하면 CMS에서 직접 실시간으로 기능을 켜거나 끄고, UI 테마를 변경하며, 앱 동작을 업데이트할 수 있습니다.

기능 사용해보기

A/B 테스트

제품 실험을 위한 플레이그라운드.

Intlayer의 새로운 AI 기반 A/B 테스트 베타를 가장 먼저 탐험해보세요. 발견 가능성을 높이고 더 스마트한 제품 결정을 안내하도록 구축되었습니다. 카피와 디자인부터 전체 기능까지 실시간으로 무엇이든 테스트하고, 데이터가 진정으로 작동하는 것을 보여주도록 하세요.

A/B 테스트 보기

이전 슬라이드←

다음 슬라이드→