Next.js 14 풀스택

# Next.js 14 풀스택 개발

## 1. Next.js란?
React 기반 풀스택 프레임워크. SSR, SSG, API Routes 지원.

## 2. 프로젝트 생성
```bash
npx create-next-app@latest myapp
cd myapp
npm run dev
```

## 3. App Router 구조
```
app/
├── layout.tsx # 루트 레이아웃
├── page.tsx # 홈 페이지 (/)
├── about/
│ └── page.tsx # /about
├── blog/
│ ├── page.tsx # /blog
│ └── [slug]/
│ └── page.tsx # /blog/:slug
└── api/
└── users/
└── route.ts # API /api/users
```

## 4. 서버 컴포넌트 (기본)
```tsx
// app/posts/page.tsx - 서버에서 실행
async function PostsPage() {
const posts = await fetch("https://api.example.com/posts").then(r => r.json());

return (
<ul>
{posts.map(post => <li key={post.id}>{post.title}</li>)}
</ul>
);
}
export default PostsPage;
```

## 5. 클라이언트 컴포넌트
```tsx
"use client";
import { useState } from "react";

export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```

## 6. 레이아웃
```tsx
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html lang="ko">
<body>
<nav>My Site</nav>
{children}
<footer>Copyright 2024</footer>
</body>
</html>
);
}
```

## 7. API Routes
```ts
// app/api/users/route.ts
import { NextResponse } from "next/server";

export async function GET() {
const users = await db.user.findMany();
return NextResponse.json(users);
}

export async function POST(request: Request) {
const body = await request.json();
const user = await db.user.create({ data: body });
return NextResponse.json(user, { status: 201 });
}
```

## 8. 동적 라우트
```tsx
// app/blog/[slug]/page.tsx
export default async function BlogPost({ params }) {
const post = await getPost(params.slug);
return <article>{post.content}</article>;
}

// 정적 생성
export async function generateStaticParams() {
const posts = await getPosts();
return posts.map(post => ({ slug: post.slug }));
}
```

## 9. Server Actions
```tsx
// app/actions.ts
"use server";

export async function createPost(formData: FormData) {
const title = formData.get("title");
await db.post.create({ data: { title } });
revalidatePath("/posts");
}

// 컴포넌트에서 사용
<form action={createPost}>
<input name="title" />
<button type="submit">Create</button>
</form>
```

## 10. 미들웨어
```ts
// middleware.ts
import { NextResponse } from "next/server";

export function middleware(request) {
const token = request.cookies.get("token");
return NextResponse.redirect(new URL("/login", request.url));
}
return NextResponse.next();
}

export const config = { matcher: ["/admin/:path*"] };
```