[Next.js] 나만의 소개 사이트 만들기

프로젝트 소개

GitHub URL

https://github.com/chdev-kr/2025-nextjs-notion-blog
배포 URL

현재 보고 있는 이 사이트입니다.

https://www.chdev.kr/

메인 페이지(chdev.kr)

소개 페이지(chdev.kr/about)

다크 모드

프로젝트명

나를 표현하는 나만의 소개 사이트 만들기(chDEV - blog)

사용 기술 및 기술 스택

Framework: Next.js 15
Language: TypeScript
UI/Styling: Tailwind CSS, shadcn/ui, next-themes(다크모드)
State/Fetching: TanStack Query
CMS: Notion API
Markdown: MDX
Build/Dev: Turbopack
Infra: Vercel

주요 특징

포스팅 기능

Notion API 연동: 데이터베이스에서 포스트 자동 가져오기
MDX 렌더링: 코드 블록/컴포넌트 포함한 풍부한 문서화
태그 필터/검색/정렬: 최신순/오래된순 및 태그별 탐색
자동 목차(TOC): 헤딩 기반 목차 생성

UI/UX

반응형 디자인: 모바일/태블릿/데스크톱 최적화
다크모드: 라이트/다크 테마 전환
컴포넌트 시스템: shadcn/ui 기반 재사용 컴포넌트

기술적 특징

React 19 준비: 최신 React API 호환 고려
Hydration 최적화: SSR/CSR 불일치 해소(mounted 패턴, suppressHydrationWarning)
이미지 최적화: Notion/외부 이미지에 품질·폭 파라미터 적용, WebP/AVIF/캐시 도입
메타·OG 최적화: 페이지/글 단위 OpenGraph, Twitter 카드 메타데이터 정교화
캐시 전략: unstable_cache + revalidateTag 로 태그/포스트 캐시 동기화

개발 배경

개발자라면 자신의 웹 페이지가 필요하다는 조언을 듣고, 취업을 준비하며 이를 직접 구현하기 위해 Next.js 학습과 함께 프로젝트를 진행했습니다. Notion에서 작성한 게시물이 자동으로 chdev.kr에 게시되도록 구현하여, 포트폴리오를 정리하고 저를 소개할 수 있는 개인 웹사이트를 구축했습니다.

또한 도메인 연결, Vercel 배포 등 실제 서비스 운영 경험을 쌓았으며, 취업 준비생으로서 다양한 컨택 포인트를 아이콘 형태로 배치해 저 자신을 어필할 수 있도록 구성했습니다. 현재도 꾸준히 사이트를 개선해 나가고 있습니다.