1편. 프로젝트 소개와 기술 스택 선정

이 시리즈에서는 Next.js App Router를 사용하여 풀스택 블로그를 처음부터 완성까지 만드는 과정을 다룹니다. 관리자 인증, 포스트 CRUD, 마크다운 렌더링, 댓글, 검색, SEO까지 실제 서비스에서 쓰이는 기능들을 단계적으로 구현합니다.

완성 후 기능 목록

• 블로그 프론트엔드: 포스트 목록/상세, 카테고리, 태그, 시리즈, 검색
• 관리자 대시보드: 포스트 작성/수정/삭제, 미디어 업로드, 설정 관리
• 인증: NextAuth.js 기반 관리자 로그인
• 댓글 시스템: 로그인/비로그인 댓글, 대댓글, 관리자 승인
• SEO: OpenGraph, JSON-LD, sitemap, RSS
• 성능: 이미지 최적화, 정적 생성, 점진적 정적 재생성(ISR)

기술 스택

왜 App Router인가?

Pages Router 대비 App Router의 핵심 장점은 React Server Components(RSC) 입니다.

// 서버에서 직접 DB를 쿼리하는 페이지 컴포넌트 — 추가 API 없이
export default async function PostsPage() {
  const posts = await prisma.post.findMany({
    where: { status: 'PUBLISHED' },
    orderBy: { publishedAt: 'desc' },
  })
  return <PostList posts={posts} />
}

클라이언트 번들에 DB 쿼리 코드가 포함되지 않아 보안과 성능 모두 좋습니다.

왜 SQLite인가?

블로그처럼 쓰기보다 읽기가 압도적으로 많은 서비스에는 SQLite가 충분합니다.

• 별도 DB 서버 불필요
• 파일 하나로 백업/복원
• 로컬 개발과 프로덕션 환경이 동일

트래픽이 늘어나면 Prisma 연결만 PostgreSQL로 바꾸면 됩니다.

시리즈 진행 순서

1. [현재 편] 프로젝트 소개와 기술 스택 선정
2. 프로젝트 초기 설정 & 디렉토리 구조
3. Prisma 스키마 설계와 마이그레이션
4. NextAuth.js 인증 시스템 구현
5. 관리자 대시보드 — 포스트 CRUD
6. 블로그 프론트엔드 & 마크다운 렌더링
7. 검색·카테고리·태그·시리즈 기능
8. SEO 최적화 — 메타태그, sitemap, RSS
9. 이미지 업로드와 미디어 관리
10. Vercel 배포와 성능 최적화

다음 편에서는 프로젝트를 초기화하고 전체 디렉토리 구조를 잡는 과정을 다룹니다.