Next.js 16, Prisma 7, SQLite, NextAuth.js를 사용해 처음부터 블로그를 만드는 전 과정을 다룹니다.
Next.js App Router 기반 풀스택 블로그를 처음부터 만드는 시리즈를 시작합니다. 전체 구조와 기술 스택 선정 이유를 소개합니다.
Next.js 프로젝트 생성부터 TailwindCSS, TypeScript 설정, 폴더 구조 설계까지 프로젝트의 뼈대를 잡습니다.
Post, Category, Tag, Series, Comment, User 등 블로그의 핵심 데이터 모델을 Prisma 스키마로 설계하고 SQLite에 마이그레이션합니다.
NextAuth.js v5(Beta)를 App Router에 통합하고, Credentials Provider로 이메일/비밀번호 로그인과 미들웨어 기반 라우트 보호를 구현합니다.
마크다운 에디터, 이미지 업로드, 카테고리/태그/시리즈 연결을 포함한 완전한 포스트 작성 UI와 API Route를 구현합니다.
React Server Components로 포스트 목록과 상세 페이지를 구현하고, react-markdown + rehype로 코드 하이라이팅과 목차(TOC)를 완성합니다.
Prisma의 contains 쿼리로 전문 검색을 구현하고, 카테고리/태그 필터, URL 기반 페이지네이션, 시리즈 목차를 완성합니다.
Next.js generateMetadata API로 동적 OpenGraph를 생성하고, JSON-LD 구조화 데이터, sitemap.xml, RSS 피드를 구현해 검색 엔진 최적화를 완성합니다.
완성된 블로그를 Vercel에 배포하는 과정과 Next.js Image 최적화, 캐싱 전략, 번들 크기 분석으로 성능을 개선하는 방법을 정리합니다.
SHIN STORY