Turborepo คืออะไร?
Turborepo คือ Build System สำหรับจัดการ Monorepo ที่พัฒนาโดย Vercel ออกแบบมาเพื่อเพิ่มความเร็วในการ Build, Test และ Deploy โปรเจกต์ขนาดใหญ่ที่มีหลาย Package อยู่ใน Repository เดียวกัน
สำหรับทีมพัฒนาในไทยที่ใช้ Next.js และ Laravel ร่วมกัน Turborepo ช่วยให้จัดการโค้ดทั้ง Frontend และ Backend ได้อย่างเป็นระบบ ลดเวลา Build ได้สูงสุด 80% ด้วยระบบ Cache อัจฉริยะ
---
ทำไมต้อง Monorepo?
ปัญหาของ Multi-repo แบบเดิม
การแยก Repository สำหรับแต่ละโปรเจกต์ (Multi-repo) อาจดูเรียบง่าย แต่เมื่อทีมเติบโตขึ้น ปัญหาเหล่านี้จะตามมา:
Monorepo แก้ปัญหาเหล่านี้ได้อย่างไร
Monorepo รวมทุกโปรเจกต์ไว้ใน Repository เดียว โดยแบ่งเป็น Packages และ Apps ที่แชร์โค้ดและ dependency ร่วมกันได้ ทำให้:
---
สถาปัตยกรรมของ Turborepo
หลักการทำงานหลัก
Turborepo ทำงานบนหลักการสำคัญ 3 ประการ:
#### 1. Task Pipeline
กำหนดลำดับการทำงานของ Task ผ่านไฟล์ `turbo.json`:
```json
{
"tasks": {
"build": {
"dependsOn": ["^build"],
"outputs": [".next/", "dist/"]
},
"dev": {
"cache": false,
"persistent": true
},
"lint": {
"dependsOn": ["^build"]
},
"test": {
"dependsOn": ["build"]
}
}
}
```
เครื่องหมาย `^` หมายถึง dependency ต้อง build ก่อน เช่น `^build` คือ Package ที่โปรเจกต์นี้พึ่งพาต้อง build เสร็จก่อน
#### 2. Intelligent Caching
Turborepo สร้าง hash จาก input files, environment variables และ dependency ถ้า hash ไม่เปลี่ยน จะใช้ผลลัพธ์จาก cache ทันทีโดยไม่ต้อง build ใหม่
#### 3. Parallel Execution
Task ที่ไม่มี dependency ต่อกันจะถูกรันพร้อมกัน (Parallel) โดยอัตโนมัติ ใช้ประโยชน์จาก CPU หลาย Core ได้เต็มที่
---
โครงสร้างโปรเจกต์ Next.js + Laravel
แนะนำโครงสร้างไดเรกทอรี
```
my-monorepo/
├── apps/
│ ├── web/ # Next.js Frontend
│ │ ├── src/
│ │ ├── next.config.js
│ │ └── package.json
│ ├── admin/ # Next.js Admin Panel
│ │ ├── src/
│ │ └── package.json
│ └── api/ # Laravel Backend
│ ├── app/
│ ├── routes/
│ ├── composer.json
│ └── package.json # สำหรับ asset build
├── packages/
│ ├── ui/ # Shared UI Components
│ │ ├── src/
│ │ └── package.json
│ ├── config-eslint/ # Shared ESLint Config
│ ├── config-typescript/ # Shared TypeScript Config
│ └── shared-types/ # API Types ที่ใช้ร่วมกัน
│ ├── src/
│ └── package.json
├── turbo.json
├── package.json
└── pnpm-workspace.yaml
```
การตั้งค่า Workspace ด้วย pnpm
ไฟล์ `pnpm-workspace.yaml`:
```yaml
packages:
```
ไฟล์ `package.json` ที่ Root:
```json
{
"name": "my-monorepo",
"private": true,
"scripts": {
"build": "turbo run build",
"dev": "turbo run dev",
"lint": "turbo run lint",
"test": "turbo run test"
},
"devDependencies": {
"turbo": "^2.4.0"
}
}
```
---
การสร้าง Shared Package
ตัวอย่าง shared-types Package
สร้าง Type definitions ที่ใช้ร่วมกันระหว่าง Frontend และ Backend:
```typescript
// packages/shared-types/src/api.ts
export interface ApiResponse<T> {
success: boolean;
data: T;
message?: string;
errors?: Record<string, string[]>;
}
export interface PaginatedResponse<T> extends ApiResponse<T[]> {
meta: {
current_page: number;
last_page: number;
per_page: number;
total: number;
};
}
export interface User {
id: number;
name: string;
email: string;
role: 'admin' | 'editor' | 'viewer';
created_at: string;
}
```
ใน Next.js Frontend สามารถ import ใช้งานได้ทันที:
```typescript
import type { ApiResponse, User } from '@myrepo/shared-types';
const fetchUser = async (id: number): Promise<ApiResponse<User>> => {
const res = await fetch(`/api/users/${id}`);
return res.json();
};
```
---
Remote Caching กับ Vercel
ทำไม Remote Cache สำคัญ
Local cache ช่วยเฉพาะเครื่องเดียว แต่ Remote Cache แชร์ผลลัพธ์ build ข้ามทั้งทีม และ CI/CD Pipeline ทำให้:
วิธีเปิดใช้งาน
```bash
# Login เข้า Vercel
npx turbo login
# เชื่อมต่อ Remote Cache
npx turbo link
```
เพียงเท่านี้ Turborepo จะอัปโหลดและดาวน์โหลด cache ผ่าน Vercel โดยอัตโนมัติ
---
เปรียบเทียบ Build Tools สำหรับ Monorepo
| เครื่องมือ | ภาษา | Remote Cache | Learning Curve | เหมาะกับ |
|-----------|-------|-------------|----------------|---------|
| Turborepo | JS/TS | ✅ (Vercel) | ต่ำ | Next.js, React, Node.js |
| Nx | JS/TS | ✅ (Nx Cloud) | ปานกลาง | Angular, React, Node.js |
| Lerna | JS/TS | ❌ | ต่ำ | Library publishing |
| Bazel | หลายภาษา | ✅ | สูง | โปรเจกต์ขนาดใหญ่มาก |
| Rush | JS/TS | ✅ | สูง | Enterprise monorepo |
สำหรับทีม SME ที่ใช้ Next.js + Laravel แนะนำ Turborepo เพราะตั้งค่าง่าย มี Remote Cache ฟรีผ่าน Vercel และรองรับ Incremental adoption ได้ดี
---
Best Practices สำหรับทีมไทย
1. เริ่มจากโปรเจกต์ใหม่
หากเป็นโปรเจกต์ใหม่ ใช้คำสั่ง:
```bash
npx create-turbo@latest my-project
```
2. Migrate ทีละขั้น
สำหรับโปรเจกต์ที่มีอยู่แล้ว ไม่ต้องย้ายทั้งหมดทีเดียว เริ่มจากย้าย shared utilities เข้ามาก่อน แล้วค่อย ๆ เพิ่ม apps ทีละตัว
3. ตั้ง Naming Convention ชัดเจน
4. ใช้ Environment Variables อย่างระวัง
Turborepo cache อิงจาก env vars ด้วย ต้องระบุใน `turbo.json`:
```json
{
"globalEnv": ["NODE_ENV", "DATABASE_URL"],
"tasks": {
"build": {
"env": ["NEXT_PUBLIC_API_URL"]
}
}
}
```
5. ตั้งค่า CI/CD ให้ใช้ Remote Cache
ใน GitHub Actions:
```yaml
run: npx turbo run build
env:
TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
TURBO_TEAM: ${{ vars.TURBO_TEAM }}
```
---
สรุป
Turborepo เป็นเครื่องมือที่ช่วยให้ทีมพัฒนา SME ไทยจัดการ Monorepo ได้อย่างมีประสิทธิภาพ ด้วย Intelligent Caching, Parallel Execution และ Remote Cache ที่ลดเวลา build ได้อย่างมหาศาล เหมาะสำหรับโปรเจกต์ที่ใช้ Next.js ร่วมกับ Laravel เป็นอย่างยิ่ง
หากทีมของคุณกำลังเผชิญปัญหา dependency conflicts, code duplication หรือ CI/CD ที่ช้า Turborepo คือคำตอบที่ควรลองใช้ในปี 2026 เริ่มต้นได้ง่ายด้วยคำสั่งเดียว และ scale ขึ้นได้ตามการเติบโตของทีม