# Unity → Next.js Fullstack Roadmap

คู่มือนี้ใช้คู่กับหน้า `/learn/fullstack` ของ 9Tae Workshop และเรียงตาม dependency ของความรู้ ไม่ใช่ตามความนิยมของ library

## ภาพรวมสั้นที่สุด

- HTML = โครงสร้างและความหมายของ content เช่น heading, navigation, form, button
- CSS = layout, สี, spacing, typography, responsive design และ animation
- JavaScript = logic และพฤติกรรมที่เกิดตอน runtime ใน browser/server
- TypeScript = JavaScript ที่เพิ่ม type checker ช่วยจับข้อผิดพลาดก่อนรัน
- React = วิธีประกอบ UI จาก component และคุม state แบบ one-way data flow
- Next.js = React framework ที่เพิ่ม routing, server rendering, Server Components, API/Route Handlers, data patterns, metadata, build และ production conventions
- Database = แหล่งข้อมูลถาวร ไม่หายเมื่อ server restart
- Object storage = ที่เก็บไฟล์ใหญ่ เช่น image, PDF, video

## Mental model สำหรับคนมาจาก Unity

| Unity | Web / React / Next.js |
|---|---|
| Scene | URL route + page tree |
| GameObject / component | React component |
| SerializedField | props |
| Runtime field | state |
| Canvas / UI Toolkit | DOM + HTML + CSS |
| Update | event handler / subscription / effect |
| ScriptableObject | typed module / JSON / CMS / database |
| Coroutine | Promise + async/await |
| Build target | browser bundle + server runtime + CDN/storage |

ข้อควรระวัง: อย่าใช้ `useEffect` แทน `Update()` ทุกอย่าง เว็บเป็น event-driven และ request-driven

## ลำดับเรียนและ MVP

### Phase 1 — Web Foundation (7–10 วัน)

เรียน semantic HTML, CSS box model, Flexbox, Grid, responsive, JavaScript event, async/await, fetch, HTTP และ DevTools

MVP: Character profile ที่ responsive มี form และ validation ฝั่ง browser

### Phase 2 — TypeScript + React (10–14 วัน)

เรียน JSX, component tree, props, state, derived state, event, form, list/key, hook และ composition

MVP: Inventory browser ที่ค้นหา กรอง เพิ่ม/ลบ และคำนวณค่ารวม โดยไม่ใช้ database

### Phase 3 — Next.js Fullstack (14–21 วัน)

เรียน App Router, page/layout/loading/error/not-found, Server/Client Components, Route Handlers, data fetching, dynamic routes, caching และ metadata

MVP: Project tracker มี list/detail/create/edit/delete และข้อมูลอยู่ใน database

### Phase 4 — Production (ต่อเนื่อง)

เรียน authentication, session, authorization, validation, rate limiting, file storage, SQL migration, automated tests, accessibility, logs, performance และ security

MVP: deploy project tracker พร้อม owner role, tests, logging และ rollback plan

## โครงสร้าง Next.js ที่ควรจำ

```text
app/
├─ layout.tsx          # UI ร่วมของ route subtree
├─ page.tsx            # หน้า / และเป็น Server Component โดย default
├─ loading.tsx         # loading fallback
├─ error.tsx           # error boundary UI
├─ not-found.tsx       # 404 UI
├─ projects/
│  ├─ page.tsx         # /projects
│  └─ [id]/page.tsx    # /projects/:id
└─ api/projects/
   └─ route.ts         # HTTP GET/POST endpoint
```

## Server หรือ Client?

ใช้ Server Component เมื่ออ่าน database, ใช้ secret, สร้าง initial HTML หรือไม่ต้องมี click/state/browser API

ใช้ Client Component (`"use client"`) เมื่อมี `useState`, `onClick`, `useEffect`, `localStorage`, `window`, media APIs หรือ interaction ใน browser

กฎง่าย: เริ่มจาก Server แล้วเพิ่ม Client boundary ให้เล็กที่สุดเท่าที่ต้องใช้

## Definition of done ของ Fullstack MVP

- HTML semantic และใช้ keyboard ได้
- responsive 360px, tablet และ desktop
- secret ไม่อยู่ใน client bundle
- mutation ทุกอัน validate input และตรวจ authorization
- database schema มี migration
- loading, empty, success และ error state ครบ
- critical behavior มี automated test
- logs บอกได้ว่า request ไหนพังเพราะอะไร โดยไม่ log secret
- deploy ซ้ำได้และมี rollback

## Official references

1. MDN Learn Web Development — https://developer.mozilla.org/en-US/docs/Learn_web_development
2. MDN HTTP Overview — https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Overview
3. TypeScript Handbook — https://www.typescriptlang.org/docs/handbook/intro.html
4. React Thinking in React — https://react.dev/learn/thinking-in-react
5. React Managing State — https://react.dev/learn/managing-state
6. Next.js App Router — https://nextjs.org/docs/app
7. Next.js Server and Client Components — https://nextjs.org/docs/app/getting-started/server-and-client-components
8. Next.js Fetching Data — https://nextjs.org/docs/app/getting-started/fetching-data
9. Next.js Route Handlers — https://nextjs.org/docs/app/getting-started/route-handlers
10. Next.js Authentication — https://nextjs.org/docs/app/guides/authentication
11. OWASP Top 10:2025 — https://owasp.org/Top10/

อ่านลำดับ 1 → 5 เพื่อสร้างฐาน จากนั้นใช้ 6 → 10 ตอนลงมือทำระบบ และเปิด OWASP ประกบทุกครั้งที่เริ่ม auth, upload, API หรือ payment