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