App Router로 정적 블로그 만들기

정적 콘텐츠 중심의 블로그는 운영 비용이 낮고, 배포도 예측 가능합니다. 이 글에서는 content/posts 아래의 MDX 파일을 읽어서 빌드 시점에 페이지를 생성하는 방식으로 구조를 잡는 방법을 정리합니다.

폴더 구조(예시)

content/
  posts/
    2026-03-01-static-next-blog.mdx
  projects/
    my-project.mdx

핵심 아이디어

1. 글 파일의 frontmatter에 title, date, description, tags를 둡니다.
2. 서버 유틸에서 frontmatter를 읽고 정렬합니다.
3. app/blog/[slug] 라우트에서 MDX를 직렬화해 렌더링합니다.
4. sitemap.xml과 rss.xml은 같은 메타데이터를 기반으로 생성합니다.

코드 블록 가독성

MDX의 fenced code block은 pre > code 형태로 렌더링되며, 전역 CSS에서 다음처럼 스타일을 적용합니다.

export const dynamic = "force-static";

export async function generateStaticParams() {
  return getAllPostMetas().map((post) => ({ slug: post.slug }));
}

필요한 건 결국 일관된 컴포넌트 스타일입니다. “복잡한 하이라이터 라이브러리” 없이도 충분히 읽기 좋은 코드 블록을 만들 수 있습니다.