Next.js15 +Typescript+Notion DB기반의 개발자들을 위한기술/포트폴리오 통합 오픈소스 블로그 스타터(Gitbook테마) 제작했습니다.

⚡️Notion DB를 CMS로 사용하는 Next.js 15 (App Router) + TypeScript 기반 블로그/문서 통합 스타터 템플릿(starter kit)입니다.

• 기술블로그 글 작성, TIL 작성, 일반 글 작성 그리고 포트폴리오 관리까지 한 곳에서 통합적으로 관리가능해요!

• 이 리포지토리를 클론 또는 fork + 제공되는 Notion 템플릿 복제 + 환경변수 설정 => 바로 로컬 실행 및 배포가 가능해요 !
  

🧱 핵심 구조 (스타터/템플릿 특장점)

• Next.js 15 최신 App Router 기반

• 전체 TypeScript 기반

• Notion DB → 페이지 생성/렌더링 (Notion을 CMS로 사용)

• 설정은 blog.config.ts + 환경변수(env.example) 중심

• ISR(페이지 결과 캐시) + on-demand 동적 라우트 운영: revalidate, dynamicParams, Notion DB 기반 generateStaticParams

• 관측성(Observability): Vercel Analytics/Speed Insights + Sentry(옵션)로 Web Vitals/에러 추적 가능

• 점진 Strict TypeScript 도입: tsconfig.strict.json + pnpm typecheck:strict

📝 렌더링/마크업

• react-notion-x 기반 Notion 렌더링

• Code highlighting(Prism) + 테마 스위칭 옵션

• 수식(KaTeX)

• Mermaid 다이어그램(CDN 로드)

• 이미지 최적화/UX

  • lazy placeholder

  • 이미지 확대(zoom) 지원

🎛 UX / 인터랙션

• 다크 모드 (appearance 설정/로컬 저장)

• 다국어(i18n): NEXT_PUBLIC_LANG 기반 locale 초기화 + 언어 전환 UI

• 페이지 전환 progress bar

• 공유(ShareBar/ShareButtons): react-share 기반

• 댓글(Giscus) 옵션

🚀 성능/운영

• 캐시(메모리 기반): ENABLE_CACHE로 제어

• Redis(Upstash) + Memory fallback: 프로덕션에서 Redis 사용, 미설정 시 메모리 캐시로 자동 폴백

• (Vercel) 크론 기반 캐시 갱신: /api/cron/update-records

• ISR(revalidate) 기반 페이지 결과 캐시: Notion fetch가 무겁더라도 라우트 결과를 캐시/재검증

• 에러 모니터링(Sentry): app/error.tsx, app/global-error.tsx에서 capture (DSN 없으면 자동 비활성)

• 번들 분석: pnpm bundle-report (ANALYZE=true)

[Performance나, 자세한 사항 확인하러가기]

=>👀https://ryoongitbooklog.vercel.app/intro/1341eb5c-0337-8112-ba09-cb77aa3db04e

📍제작시점에서 Next.js15(appRouter)기반의 Notion을 CMS로 활용하여

타입스크립트로 제작된 개발자용 기술로그/포트폴리오 기록용 블로그는

부재하던 상황이라 한 번 제작해보았습니다

📍사용하시고 언제든지 더 개선될 사항이나 보완될 부분 있으시면,
자유롭게 PR해주세요! 많은 분들의 피드백과 조언 환영합니다.
감사합니다 !