Next.js & Notion API 블로그 v1 배포 | 요람일지

개발 의도

직접 블로그를 개발하고 싶었다. 개발자라면 누구나 한 번쯤 "내 손으로 만든 블로그"에 대한 로망이 있지 않을까? 기존 블로그 플랫폼들은 훌륭하지만, 나만의 커스텀과 기술 스택 경험을 쌓기에는 한계가 있었다.

그래서 선택한 조합이 바로 Next.js + Notion API다.

Next.js: React 기반의 풀스택 프레임워크로 SSG/SSR을 자유롭게 구현 가능

Notion API: 이미 사용 중인 노션을 CMS처럼 활용할 수 있어 별도 관리자 페이지 불필요

노션에서 글을 작성하면 자동으로 블로그에 반영되는 구조. 개발자로서의 **DX(Developer Experience)**와 글을 쓰는 사람으로서의 UX 모두를 잡을 수 있는 최적의 선택이었다.

개발 목표

최종적으로 이 프로젝트는 3가지 카테고리를 담을 예정이다:

{
  "object": "block",
  "id": "2c9ee4ee-251e-8045-a0a8-ed244550ce6a",
  "parent": {
    "type": "page_id",
    "page_id": "2c9ee4ee-251e-8079-ad56-ef1c0ef4f4d8"
  },
  "created_time": "2025-12-14T06:45:00.000Z",
  "last_edited_time": "2025-12-14T06:45:00.000Z",
  "created_by": {
    "object": "user",
    "id": "dbb35ea8-dd87-4fd5-a4bd-719d5fa1096e"
  },
  "last_edited_by": {
    "object": "user",
    "id": "dbb35ea8-dd87-4fd5-a4bd-719d5fa1096e"
  },
  "has_children": true,
  "archived": false,
  "in_trash": false,
  "type": "table",
  "table": {
    "table_width": 2,
    "has_column_header": true,
    "has_row_header": false
  }
}

v1 목표: 블로그 우선 제작

첫 번째 버전에서는 블로그 기능에 집중했다.

Notion API를 활용한 글 목록 및 상세 페이지 구현

SSG(Static Site Generation) 형태로 렌더링하여 빠른 로딩 속도 확보

빌드 시점에 정적 페이지 생성 → SEO 최적화에 유리

구현 사항

1. SEO 최적화 ✅

검색 엔진 최적화는 블로그의 생명이다. 다음 항목들을 적용했다:

메타 태그: 각 페이지별 title, description 동적 생성

Open Graph / Twitter Card: SNS 공유 시 미리보기 최적화

sitemap.xml / robots.txt: 검색 엔진 크롤링 지원

Semantic HTML: 올바른 태그 구조로 접근성 향상

2. 커스텀 도메인 연결 🌐

구매한 도메인을 연결하여 브랜드 아이덴티티를 확립했다.

Vercel 대시보드에서 간단한 DNS 설정

HTTPS 자동 적용으로 보안 강화

3. CI/CD 자동 배포 ⚡

Vercel의 편의성을 최대한 활용했다.



Git Push → Vercel 자동 빌드 → 프로덕션 배포

GitHub 연동으로 push 시 자동 배포

Preview 환경으로 PR별 미리보기 가능

빌드 로그 실시간 확인

기술 스택

{
  "object": "block",
  "id": "2c9ee4ee-251e-803f-8834-fa3c05e22baf",
  "parent": {
    "type": "page_id",
    "page_id": "2c9ee4ee-251e-8079-ad56-ef1c0ef4f4d8"
  },
  "created_time": "2025-12-14T06:45:00.000Z",
  "last_edited_time": "2025-12-14T06:45:00.000Z",
  "created_by": {
    "object": "user",
    "id": "dbb35ea8-dd87-4fd5-a4bd-719d5fa1096e"
  },
  "last_edited_by": {
    "object": "user",
    "id": "dbb35ea8-dd87-4fd5-a4bd-719d5fa1096e"
  },
  "has_children": true,
  "archived": false,
  "in_trash": false,
  "type": "table",
  "table": {
    "table_width": 2,
    "has_column_header": true,
    "has_row_header": false
  }
}

회고 및 다음 단계

잘된 점 👍

Notion을 CMS로 활용하니 글 작성이 매우 편리

SSG 덕분에 페이지 로딩 속도가 빠름

Vercel CI/CD로 배포 자동화 완료

개선할 점 🔧

ISR(Incremental Static Regeneration) 도입 검토

이미지 최적화 추가

다크모드 지원

v2 계획 📋

포트폴리오 섹션 추가

프로필 페이지 구현

댓글 기능 연동 (giscus or utterances)

💡 소감: 처음부터 끝까지 직접 만든 블로그라 애착이 간다. 앞으로 이 공간을 통해 더 많은 글을 공유할 예정이다.