라이프케어로그 기술 블로그를 시작하며 — Next.js 16 정적 블로그 빌드 기록

라이프케어로그의 개발일지·제품 이야기·프론트/백엔드/AI 정보를 쌓아둘 공간이 필요해서 기술 블로그를 만들었어요. 첫 글은 이 블로그 자체를 만든 기록이에요.

스택과 방향

Next.js 16 (App Router) + MDX — 글은 content/<카테고리>/<슬러그>.mdx 파일로 두고, 빌드 시 정적 HTML로 뽑아요.
output: 'export' 정적 사이트 — 서버 없이 out/ 폴더만 생성해 Cloudflare Pages(무료 플랜)에 올려요.
카테고리 6종 — 개발일지 / 브랜딩·마케팅 / 제품소개 / 프론트엔드 / 백엔드 / AI 정보.

정적 export에서 걸렸던 두 가지

output: 'export'를 쓰면 두 군데서 막히기 쉬워요.

next.config.ts

const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: { unoptimized: true }, // 정적 export에서는 Image Optimization을 못 써요
}

images.unoptimized를 빠뜨리면 빌드가 멈춰요. 그리고 robots.ts나 sitemap.ts를 쓸 때는 한 줄이 더 필요해요.

src/app/sitemap.ts

export const dynamic = 'force-static'

이게 없으면 타입 체크는 통과하는데 빌드에서 실패해요. 정적 검사로는 안 잡히고 실제 빌드에서만 드러나는 종류라 처음엔 원인을 찾기 어려웠어요.

fail-closed 발행 게이트

이 블로그는 앞으로 글을 자동으로 쌓을 계획이라, 의도하지 않은 글이 새어 나가지 않게 발행 기준을 닫아두는 쪽으로 잡았어요. frontmatter에 publish 값이 명시적으로 true인 글만 빌드에 포함돼요. 값을 적지 않으면 기본은 false라, 초안은 저장해도 사이트에 나오지 않아요.

src/lib/posts.ts

// publish === true 인 글만 목록·라우트·sitemap에 포함
if (post.frontmatter.publish === true) {
  posts.push(post)
}

"실수로 공개"보다 "실수로 비공개"가 안전하니까요.

배포

빌드는 pnpm build 한 번으로 정적 페이지가 생성돼요. 그 결과물(out/)을 Cloudflare Pages에 올리고, lifecarelog.co.kr 서브도메인을 연결했어요. 소스는 GitHub 저장소에 두고, 다음 단계로는 글 초안을 자동으로 만들고 사실관계를 점검한 글만 발행하는 파이프라인을 붙일 계획이에요.

다음 글에서는 그 자동발행 파이프라인을 다뤄볼게요.