Next.js 16과 MDX로 나만의 기술 블로그 구축기

왜 블로그를 직접 만들었나요?

개발자로서 경험한 기술적인 내용들을 정리하고 공유하기 위해 여러 플랫폼(Tistory, Velog, Medium 등)을 고민했습니다. 하지만 기존 플랫폼들은 다음과 같은 아쉬움이 있었습니다.

1. 커스터마이징의 한계: 내가 원하는 디자인과 기능을 자유롭게 추가하기 어렵습니다.
2. 광고 수익화: 내가 원하는 위치에 자유롭게 광고를 배치하고 싶었습니다.
3. 학습: 블로그를 만드는 과정 자체가 Next.js의 새로운 기능들을 학습하는 좋은 프로젝트가 됩니다.

기술 스택 선정

이 블로그는 다음과 같은 최신 기술들을 사용하여 만들어졌습니다.

• Framework: Next.js 16 (App Router)
• Styling: Tailwind CSS v4
• Content: MDX (Markdown + JSX)
• Deployment: Vercel

MDX를 선택한 이유

개발 블로그는 코드 스니펫이 핵심입니다. MDX를 사용하면 마크다운 문법으로 글을 쓰면서도, 필요할 때 React 컴포넌트를 직접 삽입할 수 있습니다. 예를 들어, 인터랙티브한 그래프나 예제 컴포넌트를 글 중간에 넣을 수 있죠.

// MDX 파일 내부에서 React 컴포넌트 사용 예시
import MyComponent from './MyComponent';

<MyComponent />

주요 구현 기능

1. 파일 시스템 기반 라우팅

별도의 DB 없이 posts 디렉토리에 있는 .mdx 파일들을 읽어서 정적 페이지를 생성합니다. Git으로 글을 관리할 수 있어 버전 관리에도 용이합니다.

2. 구문 강조 (Syntax Highlighting)

rehype-highlight 플러그인을 사용하여 코드 블럭에 아름다운 문법 강조 효과를 적용했습니다.

3. 애드센스 연동 (AdSense)

AdUnit이라는 커스텀 컴포넌트를 만들어, 글의 상단이나 하단, 혹은 리스트 중간에 원하는 대로 광고를 배치할 수 있도록 설계했습니다.

마치며

아직은 기본적인 기능만 갖췄지만, 앞으로 댓글 기능, 태그 시스템, 검색 기능 등을 하나씩 추가해 나갈 계획입니다.

이 블로그가 저의 성장 기록이자, 방문하시는 분들에게 도움이 되는 공간이 되었으면 좋겠습니다.