Next.js와 MDX로 기술 블로그 구축하기

이번 포스트에서는 Next.js 16과 MDX를 사용하여 기술 블로그를 구축하는 방법을 알아보겠습니다.

기술 스택

• Next.js 16: App Router 기반
• MDX: 마크다운 + JSX
• gray-matter: Frontmatter 파싱
• next-mdx-remote: 서버 사이드 MDX 렌더링

프로젝트 구조

hafuture-app/
├── content/posts/       # MDX 게시글
│   ├── hello-world.mdx
│   └── vibe-coding-blog.mdx
├── src/
│   ├── app/[locale]/
│   │   └── blog/
│   │       ├── page.tsx           # 블로그 목록
│   │       └── [slug]/page.tsx    # 개별 게시글
│   ├── components/mdx/
│   │   └── mdx-content.tsx       # MDX 렌더러
│   └── lib/
│       └── posts.ts             # 게시글 데이터 로더

게시글 데이터 로딩

gray-matter를 사용하여 frontmatter와 콘텐츠를 분리합니다:

import matter from "gray-matter";

const { data, content } = matter(fileContents);

// data: frontmatter (title, date, tags 등)
// content: 마크다운 본문

MDX 렌더링

next-mdx-remote를 사용하여 서버 사이드에서 MDX를 렌더링합니다:

import { MDXRemote } from "next-mdx-remote/rsc";

<MDXRemote
  source={content}
  options={{
    mdxOptions: {
      rehypePlugins: [
        rehypeHighlight,   // 코드 하이라이팅
        rehypeSlug,       // 헤딩 슬러그
        rehypeAutolinkHeadings, // 헤딩 링크
      ],
    },
  }}
/>

SEO 최적화

Next.js의 Metadata API를 사용하여 각 게시글의 메타데이터를 설정합니다:

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const post = await getPostBySlug(slug);

  return {
    title: post.title,
    description: post.description,
  };
}

결론

Next.js와 MDX를 조합하면 CMS 없이 Git 기반의 간단하고 강력한 블로그 시스템을 구축할 수 있습니다. 이를 통해 개발자 친화적이고 유지보수가 쉬운 블로그를 운영할 수 있습니다.

다음 포스트에서는 블로그에 추가할 기능에 대해 이야기하겠습니다. 기대해 주세요!