Next.js는 혼자가 아닙니다
Next.js로 실제 서비스를 만들려면 Next.js 하나만으로는 부족합니다. 스타일링, 데이터베이스, 인증, 배포 등 여러 도구가 함께합니다. 이 책에서 사용하는 기술 스택을 미리 살펴봅니다.
스타일링: TailwindCSS
TailwindCSS는 CSS를 클래스 이름으로 작성하는 방식입니다. 별도의 CSS 파일 없이 HTML 태그에 직접 스타일을 붙입니다.
// 일반 CSS 방식
// styles.module.css 파일 필요
<div className={styles.card}>안녕하세요</div>
// TailwindCSS 방식
<div className="rounded-lg bg-white p-4 shadow-md">안녕하세요</div>
```text
처음에는 클래스 이름이 길어 보여서 어색할 수 있습니다. 하지만 CSS 파일과 컴포넌트 파일을 오가지 않아도 되고, 클래스 이름을 짓는 고민도 줄어듭니다. `create-next-app`으로 프로젝트를 만들 때 TailwindCSS를 바로 선택할 수 있습니다.
## 데이터베이스 ORM: Prisma
Prisma는 TypeScript 친화적인 ORM(Object-Relational Mapping)입니다. SQL 대신 TypeScript 코드로 데이터베이스를 다룰 수 있습니다.
```typescript
// SQL 대신 이렇게 씁니다
const posts = await prisma.post.findMany({
where: { published: true },
orderBy: { createdAt: "desc" },
take: 10,
});
```text
Prisma를 쓰면 데이터베이스 테이블 구조를 `schema.prisma` 파일 하나로 관리할 수 있고, 자동완성과 타입 안전성이 보장됩니다. 이 책의 실전 프로젝트(PART 07)에서 PostgreSQL과 함께 사용합니다.
## 인증: NextAuth.js
로그인 기능을 처음부터 구현하려면 세션 관리, 암호화, CSRF 방지 등 고려할 것이 많습니다. NextAuth.js는 이 모든 것을 처리해주는 Next.js 전용 인증 라이브러리입니다.
```typescript
// 소셜 로그인을 몇 줄로 구현합니다
import NextAuth from "next-auth";
import Google from "next-auth/providers/google";
export const { handlers, auth } = NextAuth({
providers: [Google],
});
```text
이메일/비밀번호 로그인, Google, GitHub 같은 소셜 로그인을 간단하게 추가할 수 있습니다. PART 06에서 자세히 다룹니다.
## 배포: Vercel과 Docker
Next.js를 만든 회사가 Vercel입니다. GitHub에 코드를 올리면 자동으로 배포가 이루어지며, 글로벌 CDN을 통해 전 세계 어디서나 빠르게 접근할 수 있습니다. 개인 프로젝트나 스타트업에 적합합니다.
회사 내부 서버나 개인 서버에 배포하고 싶다면 Docker를 사용합니다. `Dockerfile`을 작성하면 어떤 서버에서도 동일한 환경으로 실행할 수 있습니다. PART 08에서 Vercel과 Docker 배포를 모두 다룹니다.
## 이 책의 기술 스택 전체 그림
이 책은 이 스택으로 실제 동작하는 풀스택 블로그를 만드는 것을 목표로 합니다.
## 버전 안내
이 책은 다음 버전을 기준으로 작성되었습니다.
| 기술 | 버전 |
|------|------|
| Next.js | 15.x (App Router) |
| React | 19.x |
| TypeScript | 5.8+ |
| TailwindCSS | 4.x |
| Prisma | 6.x |
| NextAuth.js | 5.x (Auth.js) |
| Node.js | 22 LTS |
다음 챕터에서는 이 책의 구성과 선수 지식을 안내합니다.