Velite와 MDX로 만드는 현대적인 블로그

소개

안녕하세요! 이 블로그는 Velite와 MDX를 사용하여 구축되었습니다. Velite는 Contentlayer와 유사하지만 Next.js 15를 완벽하게 지원하는 최신 도구입니다.

이 포스트에서는 다양한 MDX 기능들을 시연하겠습니다.

코드 하이라이팅

Velite는 rehype-pretty-code를 통해 아름다운 코드 하이라이팅을 제공합니다:

import { posts } from ".velite";
 
export default function Blog() {
  const publishedPosts = posts.filter((post) => post.published);
 
  return (
    <div>
      {publishedPosts.map((post) => (
        <article key={post.slug}>
          <h2>{post.title}</h2>
          <p>{post.description}</p>
        </article>
      ))}
    </div>
  );
}

다른 언어도 지원합니다:

def hello_world():
    print("Hello, World!")
    return True
 
if __name__ == "__main__":
    hello_world()

리스트와 포매팅

순서 없는 리스트

• Velite는 빌드 타임에 MDX를 처리합니다
• 타입 안전성을 제공합니다
• Next.js 15와 완벽하게 호환됩니다
• 자동 코드 하이라이팅
• TOC 생성

순서 있는 리스트

1. 프로젝트 설정
2. Velite 설치
3. 설정 파일 작성
4. MDX 파일 작성
5. 페이지 구현

인용구

Velite는 Next.js를 위한 최고의 콘텐츠 관리 도구입니다. 타입 안전성과 성능을 모두 제공합니다.

테이블

이미지

MDX에서는 이미지도 쉽게 추가할 수 있습니다:

링크

Velite 공식 문서를 확인해보세요!

다음 단계

이제 커스텀 컴포넌트를 추가하여 더욱 풍부한 콘텐츠를 만들 수 있습니다:

• Callout 컴포넌트
• 코드 탭
• 이미지 갤러리
• 인터랙티브 요소들

다음 포스트에서 계속...