개발자라면 한 번쯤 "내 블로그를 직접 만들어볼까?" 하는 생각을 합니다. Velog나 Tistory 같은 플랫폼도 훌륭하지만, 디자인과 기능을 처음부터 끝까지 내 마음대로 정할 수 있는 자체 블로그는 그 자체로 하나의 포트폴리오가 됩니다. 글을 담는 그릇을 만드는 일이, 동시에 결과물을 만드는 일이 되는 셈이죠.
이 글에서는 Next.js 16의 App Router와 MDX를 조합해 블로그를 구축한 과정을, 설계 결정부터 배포까지 순서대로 풀어봅니다.
1. 왜 Next.js + MDX인가?
먼저 두 도구를 고른 이유부터 짚고 가겠습니다.
App Router는 기존 Pages Router와 달리 **React Server Components(RSC)**를 기본값으로 씁니다. 블로그처럼 정적 콘텐츠가 많은 프로젝트에서는 이 차이가 꽤 큽니다. 서버 컴포넌트에서 fs.readFileSync로 파일 시스템에 직접 접근할 수 있고, 그만큼 클라이언트로 내려보내는 번들이 가벼워집니다. 게다가 동적 라우팅이 폴더 구조 그대로 표현돼서 URL과 파일이 직관적으로 대응됩니다.
여기에 MDX를 더하면, Markdown 안에서 JSX 컴포넌트를 그대로 쓸 수 있습니다. 일반 Markdown보다 표현력이 풍부하면서도, 콘텐츠는 여전히 파일로 남아 CMS 없이 관리됩니다. **"서버에서 파일을 읽어 가볍게 그린다(RSC) + 콘텐츠는 파일로 둔다(MDX)"**는 이 조합이 블로그의 뼈대가 됐습니다.
2. 프로젝트 구조 설계
code
src/
├── app/
│ ├── posts/
│ │ ├── page.tsx # 글 목록 페이지
│ │ └── [category]/[id]/
│ │ └── page.tsx # 글 상세 페이지
│ └── layout.tsx # 루트 레이아웃
├── posts/ # MDX 파일 저장소
│ ├── NextJS/
│ │ └── 1.mdx
│ └── ReactNative/
│ └── 1.mdx
└── lib/
└── postManagement/ # 포스트 유틸리티
├── getPostList.ts
├── getPostDetail.ts
└── types.ts
설계의 핵심은 카테고리를 폴더 구조 그 자체로 관리한다는 것입니다. src/posts/[카테고리명]/[번호].mdx 형태로 파일을 넣기만 하면 카테고리가 자동으로 인식됩니다. 별도의 설정 파일이나 데이터베이스 없이, 파일을 두는 위치가 곧 메타데이터가 되는 구조죠.
