Next.js 블로그 만들기 — 스크롤 프로그레스 바와 Canvas 렌더링 이슈 해결

Next.js 블로그 만들기 — 스크롤 프로그레스 바와 Canvas 렌더링 이슈 해결

스크롤 진행률 프로그레스 바 구현과 Canvas 커서 효과가 GNB backdrop-blur와 충돌하며 발생한 깜빡임 이슈 해결기.

CanvasUX디버깅
6 min read
Next.js 블로그 만들기 — TOC와 커서 효과로 디테일 살리기

Next.js 블로그 만들기 — TOC와 커서 효과로 디테일 살리기

IntersectionObserver 기반 TOC(Table of Contents)와 Canvas 커서 트레일 효과 구현기. 스크롤 하이라이팅, fixed 레이아웃 처리까지.

TOCCanvasUX
12 min read
Next.js 블로그 만들기 — giscus로 댓글 기능 추가

Next.js 블로그 만들기 — giscus로 댓글 기능 추가

서버 없이 GitHub Discussions 기반 댓글 시스템 giscus를 Next.js 블로그에 연동하기. 다크모드 자동 전환까지.

giscusGitHub댓글
5 min read
Next.js 블로그 만들기 — 카드 그리드와 포스트 상세 페이지

Next.js 블로그 만들기 — 카드 그리드와 포스트 상세 페이지

Velog 스타일 카드 UI와 MDX 렌더링 상세 페이지 구현. 반응형 그리드, SEO 메타데이터, 정적 사이트 생성까지.

Next.jsReactMDX
6 min read
Next.js 블로그 만들기 — 다크모드와 Tailwind CSS v4 테마

Next.js 블로그 만들기 — 다크모드와 Tailwind CSS v4 테마

Tailwind CSS v4의 CSS-first 설정과 next-themes를 활용한 다크/라이트 모드 구현. 커스텀 프로퍼티 기반 테마 시스템 구축기.

Tailwind CSS다크모드next-themes
7 min read
Next.js 15로 개인 블로그 만들기 — 프로젝트 셋업

Next.js 15로 개인 블로그 만들기 — 프로젝트 셋업

왜 직접 블로그를 만들었는지, 기술 스택 선정 이유와 프로젝트 초기 구성까지. Next.js 15 + Tailwind CSS v4 + MDX 기반 블로그의 시작.

Next.js블로그Tailwind CSS
7 min read