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

프로젝트 소개

1. GitHub URL

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

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