Next.js 블로그 모범 사례 탐구: Vercel 리더십 블로그 아키텍처 파헤치기│인프콘2024

전통적인 블로그는 Markdown의 frontmatter와 본문을 matter·remark로 파싱하고 추상 구문 트리를 HTML로 바꿔 페이지에 표시한다. Pages Router의 동적 경로와 getStaticPaths·getStaticProps로 빌드 시 글 목록과 상세 페이지를 생성해 빠른 정적 응답을 제공한다. 제목과 설명 같은 검색 메타데이터는 Head 컴포넌트에서 페이지별로 직접 선언하는 형태가 기본이 된다.

Next.js는 파일 기반 라우팅과 사전 렌더링, API Route를 제공해 React 애플리케이션의 반복 구성을 프레임워크 안으로 가져왔다. 이후 React Server Components와 App Router가 서버 데이터 접근과 중첩 레이아웃을 바꾸고, route group과 server action이 구조화와 변경 작업을 단순화했다. Partial Prerendering은 정적인 셸을 먼저 제공하면서 조회수처럼 동적인 부분만 Suspense 경계 안에서 늦게 채우는 방식이다.

두 블로그 모두 Next.js 14 계열과 TypeScript·Tailwind·Vercel Analytics를 쓰지만 콘텐츠와 데이터의 경계는 다르게 설계했다. Guillermo는 MDX를 페이지 코드로 두고 조회수를 Redis와 API로 관리하는 반면, Lee는 외부 MDX를 데이터처럼 불러오고 Postgres와 server action으로 조회수를 갱신한다. 같은 프레임워크에서도 글 작성 방식과 운영 요구에 따라 콘텐츠를 코드 또는 데이터로 취급하는 선택이 달라진다.

Guillermo는 route group과 ISR을 조합하고, Lee는 동적 경로와 PPR·Suspense로 날짜와 조회수 같은 영역을 분리한다. 정적 메타데이터와 generateMetadata, 동적 OG 이미지, JSON-LD 적용도 각 블로그의 검색·공유 요구에 맞게 다르다. 발표자는 코드로 쓰는 콘텐츠와 목록용 데이터 생성을 조합해 장점을 취하며, 아키텍처는 고정된 모범 답안이 아니라 제품과 프레임워크 변화에 따라 계속 조정되는 선택이라고 결론짓는다.