2편. 프로젝트 초기 설정과 디렉토리 구조

프로젝트 생성

CODE

npx create-next-app@latest dev-blog \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"

추가 패키지 설치

CODE

# ORM & DB
npm install prisma @prisma/client @prisma/adapter-better-sqlite3 better-sqlite3
npm install -D @types/better-sqlite3

# 인증
npm install next-auth@beta

# 마크다운
npm install react-markdown remark-gfm rehype-highlight rehype-slug
npm install highlight.js

# 유틸
npm install bcryptjs
npm install -D @types/bcryptjs

디렉토리 구조

CODE

src/
├── app/
│   ├── (blog)/          # 공개 블로그 라우트 그룹
│   │   ├── page.tsx     # 홈
│   │   ├── posts/
│   │   ├── category/
│   │   ├── tag/
│   │   ├── series/
│   │   ├── search/
│   │   └── about/
│   ├── admin/           # 관리자 라우트
│   │   ├── layout.tsx
│   │   ├── page.tsx     # 대시보드
│   │   ├── posts/
│   │   └── settings/
│   ├── api/             # API Routes
│   │   ├── auth/
│   │   └── posts/
│   └── layout.tsx       # 루트 레이아웃
├── components/
│   ├── blog/            # 블로그 전용 컴포넌트
│   ├── admin/           # 관리자 전용 컴포넌트
│   ├── layout/          # Header, Footer
│   └── ui/              # 공통 UI (Button, Badge 등)
├── lib/
│   ├── prisma.ts        # Prisma 클라이언트 싱글톤
│   ├── auth.ts          # NextAuth 설정
│   ├── settings.ts      # 블로그 설정 헬퍼
│   └── utils.ts         # 유틸 함수
└── types/
    └── index.ts         # 공통 타입 정의

Route Groups 활용

App Router의 Route Groups (폴더명)을 사용하면 URL에 영향을 주지 않고 레이아웃을 분리할 수 있습니다.

CODE

(blog)/page.tsx   → /
(blog)/posts/     → /posts
admin/page.tsx    → /admin

블로그 헤더/푸터와 관리자 사이드바 레이아웃을 완전히 독립적으로 관리할 수 있습니다.

루트 레이아웃

CODE

// src/app/layout.tsx
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: { default: 'Dev Blog', template: '%s | Dev Blog' },
  description: '개발자의 기술 블로그',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko" className="dark">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Prisma 초기 설정

CODE

npx prisma init --datasource-provider sqlite

생성된 prisma/schema.prisma를 열어 다음 편에서 모델을 정의합니다.

환경 변수

CODE

# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key-here

# DB (Prisma는 schema.prisma에서 직접 경로 지정)
NEXT_PUBLIC_SITE_URL=http://localhost:3000

다음 편에서는 블로그의 핵심 데이터 모델인 Prisma 스키마를 설계하고 마이그레이션하는 방법을 다룹니다.

2편. 프로젝트 초기 설정과 디렉토리 구조

프로젝트 생성

CODE

npx create-next-app@latest dev-blog \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"

추가 패키지 설치

CODE

# ORM & DB
npm install prisma @prisma/client @prisma/adapter-better-sqlite3 better-sqlite3
npm install -D @types/better-sqlite3

# 인증
npm install next-auth@beta

# 마크다운
npm install react-markdown remark-gfm rehype-highlight rehype-slug
npm install highlight.js

# 유틸
npm install bcryptjs
npm install -D @types/bcryptjs

디렉토리 구조

CODE

src/
├── app/
│   ├── (blog)/          # 공개 블로그 라우트 그룹
│   │   ├── page.tsx     # 홈
│   │   ├── posts/
│   │   ├── category/
│   │   ├── tag/
│   │   ├── series/
│   │   ├── search/
│   │   └── about/
│   ├── admin/           # 관리자 라우트
│   │   ├── layout.tsx
│   │   ├── page.tsx     # 대시보드
│   │   ├── posts/
│   │   └── settings/
│   ├── api/             # API Routes
│   │   ├── auth/
│   │   └── posts/
│   └── layout.tsx       # 루트 레이아웃
├── components/
│   ├── blog/            # 블로그 전용 컴포넌트
│   ├── admin/           # 관리자 전용 컴포넌트
│   ├── layout/          # Header, Footer
│   └── ui/              # 공통 UI (Button, Badge 등)
├── lib/
│   ├── prisma.ts        # Prisma 클라이언트 싱글톤
│   ├── auth.ts          # NextAuth 설정
│   ├── settings.ts      # 블로그 설정 헬퍼
│   └── utils.ts         # 유틸 함수
└── types/
    └── index.ts         # 공통 타입 정의

Route Groups 활용

App Router의 Route Groups (폴더명)을 사용하면 URL에 영향을 주지 않고 레이아웃을 분리할 수 있습니다.

CODE

(blog)/page.tsx   → /
(blog)/posts/     → /posts
admin/page.tsx    → /admin

블로그 헤더/푸터와 관리자 사이드바 레이아웃을 완전히 독립적으로 관리할 수 있습니다.

루트 레이아웃

CODE

// src/app/layout.tsx
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: { default: 'Dev Blog', template: '%s | Dev Blog' },
  description: '개발자의 기술 블로그',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko" className="dark">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Prisma 초기 설정

CODE

npx prisma init --datasource-provider sqlite

생성된 prisma/schema.prisma를 열어 다음 편에서 모델을 정의합니다.

환경 변수

CODE

# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key-here

# DB (Prisma는 schema.prisma에서 직접 경로 지정)
NEXT_PUBLIC_SITE_URL=http://localhost:3000

다음 편에서는 블로그의 핵심 데이터 모델인 Prisma 스키마를 설계하고 마이그레이션하는 방법을 다룹니다.

2편. 프로젝트 초기 설정과 디렉토리 구조

2편. 프로젝트 초기 설정과 디렉토리 구조

프로젝트 생성

추가 패키지 설치

디렉토리 구조

Route Groups 활용

루트 레이아웃

Prisma 초기 설정

환경 변수

같은 카테고리 포스트

댓글

2편. 프로젝트 초기 설정과 디렉토리 구조

2편. 프로젝트 초기 설정과 디렉토리 구조

프로젝트 생성

추가 패키지 설치

디렉토리 구조

Route Groups 활용

루트 레이아웃

Prisma 초기 설정

환경 변수

같은 카테고리 포스트

댓글