Next.js로 제작한 기술 블로그

글쓰기와 공유하는 활동을 좋아하는 성향을 바탕으로 개발 생태계에 기여하고자 기술 블로그를 시작하게 되었습니다 🌻

✔️ Next.js 선택 이유

  • SEO 최적화 를 통해 더 많은 사용자들에게 블로그를 노출하여 정보 전달
  • 정적 컨텐츠를 SSG를 통해 렌더링하여 초기 로딩 속도 를 개선
  • Next.js의 Image 컴포넌트, webp 변환, priority 등의 기능을 활용하여 이미지 최적화LCP 5초 개선
  • 성능 개선 과정을 블로그에 기록 Lighthouse로 Next.js 성능 44% 개선하기

🌐 URL

https://enjoydev.life


🛠️ Tech Stack

Area Tech Stack
Frontend

✨ 주요 기능

  • contentlayer 를 이용한 mdx 파일 관리 및 포스팅
  • TOC(Table of Contents) 구현
  • Giscus를 이용한 댓글 기능
  • 포스트 검색 기능
  • 다크 모드 지원
  • 반응형 디자인
  • 사이트맵 생성 및 구글 검색 엔진 등록
  • 구글 Analytics 연동

📦 Project Structure

📦 src
├── 📂 components
│   ├── 📂 common
│   ├── 📂 contents
|   ├── 📂 home
│   ├── 📂 icons
│   ├── 📂 mdx
│   ├── 📂 post
│   ├── 📂 series
│   └── 📂 snippet
├── 📂 constants
├── 📂 layouts
├── 📂 libs
├── 📂 pages
│   ├── 📂 blog
│   ├── 📂 search
│   └── 📂 snippets
├── 📂 styles
└── 📂 types

🚀 Getting Started

yarn install
yarn dev