ตั้ง Monorepo (pnpm + Turbo + Next.js) ตั้งแต่ 0

TL;DR

• ใช้ pnpm workspace + TurboRepo ตั้งโครงสร้าง Monorepo
• สร้างแอปแรกด้วย Next.js (App Router) พร้อม apps/ และ packages/
• ใช้งานได้ทั้งบน macOS และ Windows ภายใน 30 นาที

---

1. ตรวจสอบเวอร์ชันเครื่องมือที่ต้องใช้

# Node.js (ควร >= 18.x)
$ node -v

# pnpm (ควร >= 8.x)
$ pnpm -v

# git
$ git --version

💡 ถ้ายังไม่มี pnpm:

$ npm install -g pnpm

---

2. สร้างโฟลเดอร์โปรเจกต์หลัก

$ mkdir nokfa-monorepo
$ cd nokfa-monorepo
$ git init

---

3. สร้างไฟล์ตั้งค่า pnpm workspace

$ touch pnpm-workspace.yaml

📄 pnpm-workspace.yaml

packages:
  - 'apps/*'
  - 'packages/*'

---

4. สร้าง package.json ส่วนกลาง + ติดตั้ง Turbo

$ pnpm init -y
$ pnpm add -D turbo

📄 package.json (บางส่วน)

{
  "name": "nokfa-monorepo",
  "private": true,
  "scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build",
    "lint": "turbo run lint"
  }
}

---

5. สร้างไฟล์ turbo.json

$ touch turbo.json

📄 turbo.json

{
  "$schema": "https://turborepo.org/schema.json",
  "pipeline": {
    "dev": {
      "cache": false
    },
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "lint": {
      "outputs": []
    }
  }
}

---

6. สร้างแอปแรกใน apps/

$ mkdir -p apps/web
$ cd apps/web
$ pnpm create next-app --no-tailwind --ts --app --import-alias "@/*"

✅ เลือก apps/web เป็นโฟลเดอร์ติดตั้ง ⌨️ ตั้งชื่อโปรเจกต์: web ❌ ไม่ต้องเลือก Tailwind (ถ้าทีมยังไม่ใช้) ✅ ใช้ TypeScript ✅ ใช้ App Router ✅ ใช้ ESLint ✅ ใช้ src/ directory หรือไม่ก็ได้ (แนะนำ ไม่ใช้)

---

7. ตั้ง alias ให้ cross-import ได้

📄 สร้างไฟล์ tsconfig.base.json ที่ root:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@nokfa/ui": ["packages/ui/src"],
      "@nokfa/utils": ["packages/utils/src"]
    }
  }
}

📄 แล้วให้ apps/web/tsconfig.json เพิ่ม extends:

{
  "extends": "../../tsconfig.base.json",
  ...
}

---

8. สร้าง packages แชร์โค้ด

$ mkdir -p packages/ui/src
$ mkdir -p packages/utils/src
$ touch packages/ui/package.json
$ touch packages/utils/package.json

📄 packages/ui/package.json

{
  "name": "@nokfa/ui",
  "version": "0.1.0",
  "main": "src/index.ts",
  "private": true
}

📄 packages/utils/package.json

{
  "name": "@nokfa/utils",
  "version": "0.1.0",
  "main": "src/index.ts",
  "private": true
}

📄 ตัวอย่าง packages/ui/src/index.ts

export const Button = () => <button>Click</button>;

📄 ตัวอย่าง apps/web/app/page.tsx

'use client';
import { Button } from '@nokfa/ui';

export default function Home() {
  return <Button />;
}

---

9. ติดตั้ง dependency ที่ root

$ cd ../../
$ pnpm install

---

10. สั่งรันแอป

# ทั้งระบบ (build dev ทั้งหมด)
$ pnpm dev

# หรือเฉพาะเว็บ
$ pnpm --filter web dev

---

11. โครงสร้างที่ได้ (เบื้องต้น)

/nokfa-monorepo
├── apps/
│   └── web/
│       ├── app/
│       ├── public/
│       ├── package.json
│       └── tsconfig.json
├── packages/
│   ├── ui/
│   │   ├── src/
│   │   └── package.json
│   └── utils/
│       ├── src/
│       └── package.json
├── package.json
├── pnpm-workspace.yaml
├── tsconfig.base.json
└── turbo.json

---

Tips สำหรับ macOS / Windows

• ✅ macOS: เปิดด้วย iTerm หรือ Terminal.app ได้เลย
• ✅ Windows: ใช้ PowerShell หรือ Git Bash
• ✅ Editor: แนะนำ VSCode พร้อม plugin: ESLint, Prettier
• ✅ pnpm บน Windows อาจต้องใช้ Set-ExecutionPolicy ครั้งแรก

---

FAQ

Q: ทำไมต้องใช้ pnpm แทน npm?

• เร็วกว่า, ประหยัดพื้นที่, รองรับ workspace โดยตรง

Q: Turbo ใช้ทำอะไร?

• รัน pipeline ข้ามหลายแอปแบบขนาน, แชร์ cache, ข้ามขั้นตอนที่ไม่เปลี่ยน

Q: ถ้าจะเพิ่มแอปอีก ต้องทำอย่างไร?

$ mkdir apps/admin-dashboard
$ pnpm create next-app apps/admin-dashboard

แล้วเชื่อม tsconfig เหมือนที่ web ทำ

Q: ถ้าจะ import UI component มาใช้ในหลายแอป?

• สร้างที่ packages/ui/src, แล้ว import ด้วย alias @nokfa/ui

Q: ใช้กับ Git ยังไง?

$ git init
$ git add .
$ git commit -m "Initial monorepo setup"

---

ถ้าทำครบขั้นตอนนี้แล้ว = พร้อมพัฒนาแอปจริงได้เลยในโครงสร้างแบบ Monorepo 🚀