ตั้งแต่ Next.js v12 เป็นต้นมา
Next.js ใช้ SWC (Rust-based compiler) แทน Babel เป็นค่าเริ่มต้น
เพราะ:
- เร็วกว่า ~17x
- ใช้ memory น้อย
- แปล JSX/TS ได้เหมือน Babel
แต่ถ้าคุณสร้าง babel.config.js ➤ Next.js จะ fallback ไปใช้ Babel แทนทันทีค่ะ
| คำถาม | คำตอบ |
|---|---|
| ❓ Babel ใน Next.js คืออะไร | Compiler ที่แปลง JSX, TS, JS ใหม่ให้ browser เข้าใจ |
| ❓ ต้องตั้งค่าไหม | ไม่จำเป็น ถ้าใช้ config ปกติ |
| ❓ จะใช้ Babel หรือ SWC? | Next.js ใช้ SWC เป็น default, แต่คุณเปลี่ยนได้ |
| ❓ ลองแปลงได้ที่ไหน | Babel REPL |
คำแนะนำเมื่อใช้ Next.js:
| ถ้าคุณ... | แนะนำ |
|---|---|
| ใช้ JSX / TS ปกติ | ไม่ต้องยุ่งกับ Babel |
| ต้องใช้ decorator / styled-components | ค่อยเพิ่ม babel.config.js |
| อยาก build ให้เบาที่สุด | ปรับ Babel config, หรือใช้ SWC (Next.js รองรับแล้ว) |
✅ สถานการณ์ที่คุณ ควรปรับแต่ง Babel (ใช้ babel.config.js)
| กรณี | ทำไมต้องปรับ Babel |
|---|---|
| 🔧 ใช้ decorators (เช่นใน MobX, class-validator) | ยังไม่ stable ใน JS ปกติ ต้องเปิด plugin |
| 🎨 ใช้ styled-components | ต้องเปิด Babel plugin เพื่อให้ SSR + className ทำงานดีขึ้น |
| 📊 ใช้ library ที่ต้องการ plugin พิเศษ (เช่น lodash, react-intl) | ปรับลดขนาด bundle หรือเพิ่ม optimization |
| 💬 ต้องการแปล message จาก code โดยตรง (i18n extract) | ใช้ babel-plugin-react-intl |
| 🚫 ต้องการ exclude หรือ include Babel เฉพาะบางไฟล์ | ปรับ rules แบบละเอียด |
| 💥 ต้องรองรับ legacy browser พิเศษ (เช่น IE11) | ปรับ preset-env target เอง |
| ⚙️ ต้องการ custom JSX runtime (แทน React) | ปรับ JSX transform เอง เช่นใช้ preact หรือ emotion |
🛠 ตัวอย่าง Babel Plugin ที่ใช้บ่อย:
| Plugin | ใช้ทำอะไร |
|---|---|
@babel/plugin-proposal-decorators | เปิดใช้ @decorator บน class |
babel-plugin-styled-components | ปรับปรุง SSR, ลด className ซ้ำซ้อน |
babel-plugin-lodash | ลดขนาด bundle เวลาใช้ lodash |
babel-plugin-import | ทำ tree-shaking อัตโนมัติกับ lib เช่น antd |
@babel/plugin-proposal-class-properties | รองรับ field ใน class (เช่น count = 0) |
📁 ตัวอย่างไฟล์ babel.config.js
module.exports = {
presets: ['next/babel'], // ใช้ร่วมกับ Next.js
plugins: [
['styled-components', { ssr: true }],
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }]
]
};
| กรณี | ทำไมไม่ต้อง |
|---|---|
| ใช้ React, JSX, TypeScript ปกติ | Next.js / CRA / Vite รองรับอยู่แล้ว |
| ไม่ใช้ decorators หรือ styled-components | ไม่ต้องเพิ่ม plugin |
| ไม่มีการ target browser พิเศษ | preset-default เพียงพอ |
🧠 เมื่อไหร่ “ไม่จำเป็น” ต้องปรับ Babel
| กรณี | ทำไมไม่ต้อง |
|---|---|
| ใช้ React, JSX, TypeScript ปกติ | Next.js / CRA / Vite รองรับอยู่แล้ว |
| ไม่ใช้ decorators หรือ styled-components | ไม่ต้องเพิ่ม plugin |
| ไม่มีการ target browser พิเศษ | preset-default เพียงพอ |
| ใช้ lib ที่ต้องการ plugin | styled-components, react-intl |
| ต้องใช้ syntax ใหม่ (เช่น decorators) | mobx, class-validator |
| ต้องปรับขนาด bundle | tree-shaking, import แบบเฉพาะ |
| ต้องปรับ target browser | IE11, low-spec device |
✅ SWC คืออะไร?
SWC ย่อมาจาก Speedy Web Compiler
คือ คอมไพเลอร์ (compiler) ที่เขียนด้วยภาษา Rust
ใช้แปลงโค้ด JavaScript, TypeScript และ JSX เช่นเดียวกับ Babel แต่เร็วกว่า หลายเท่า
🔧 SWC ทำอะไรได้เหมือน Babel ไหม?
| ทำอะไรได้บ้าง | เหมือนกับ Babel |
|---|---|
| แปลง JSX → JS | ✅ |
| แปลง TypeScript → JS | ✅ |
| รองรับ modern JS syntax (ES6+) | ✅ |
| ทำ Tree Shaking | ✅ |
| มี Plugin system (ยังจำกัด) | 🔶 ยังไม่ flexible เท่า Babel |
⚡ เปรียบเทียบ: SWC vs Babel
| ด้าน | SWC | Babel |
|---|---|---|
| ภาษา | Rust (compiled) | JavaScript (interpreter) |
| ความเร็ว | 🔥 เร็วกว่ามาก (~10–20x) | ช้ากว่า (โดยเฉพาะไฟล์ใหญ่) |
| รองรับ JSX / TS | ✅ เต็มรูปแบบ | ✅ |
| รองรับ Plugins | 🔶 ยังไม่ครอบคลุมเท่า | ✅ ใช้ได้หลากหลาย |
| ใช้ใน... | Next.js, Vite, Turbopack | Next.js (fallback), CRA, Webpack |
| Customization ลึก | 🔽 ยังจำกัด | ✅ สูงมาก |
📊 Benchmark (โดยทีม Vercel): SWC build เร็วกว่า Babel ถึง ~20 เท่า ในบางกรณี ใช้ memory น้อยกว่า
ใช้ SWC ดีกว่า Babel ไหม?
| ถ้าคุณ... | คำแนะนำ |
|---|---|
| ❌ ไม่ได้ใช้ Babel plugin พิเศษ | ✅ ใช้ SWC ไปเลย |
| ✅ ใช้ styled-components, decorator | อาจต้องใช้ Babel |
| ต้องการ build ไว, ลดเวลา dev | ✅ SWC เหมาะมาก |
| ต้องใช้ plugin/custom transform เฉพาะทาง | ➤ Babel ยังยืดหยุ่นกว่า |
สรุป
| คำถาม | คำตอบ |
|---|---|
| ❓ SWC คืออะไร | Compiler เขียนด้วย Rust สำหรับแปลง JS/TS/JSX |
| ❓ ต่างจาก Babel ยังไง | เร็วกว่า, ใช้ memory น้อย, แต่ plugin ยังไม่เยอะเท่า |
| ❓ ใช้กับอะไรได้บ้าง | React, Next.js, Vite, รวมถึงการ build ทั่วไป |
| ❓ Next.js ใช้ไหม | ✅ ใช้ SWC เป็น default (เว้นแต่คุณใส่ babel.config.js) |
ตัวอย่าง Plugins ที่ Babel รองรับแต่ SWC ยังไม่รองรับ (หรือรองรับแค่บางส่วน)
| Plugin | ใช้ทำอะไร | สถานะใน Babel | สถานะใน SWC |
|---|---|---|---|
@babel/plugin-proposal-decorators | ใช้ @decorator บน class (เช่น MobX, class-validator) | ✅ รองรับ | ❌ ยังไม่รองรับ (กำลังพัฒนา) |
babel-plugin-styled-components | ช่วยกับ SSR, ปรับ className styled-components | ✅ รองรับ | ❌ ยังไม่รองรับ |
babel-plugin-import | Import แบบอัจฉริยะ (เช่น antd, lodash) | ✅ รองรับ | ❌ ยัง |
babel-plugin-react-intl | ดึงข้อความเพื่อทำ i18n จาก JSX | ✅ รองรับ | ❌ ยังไม่รองรับ |
babel-plugin-transform-remove-console | ลบ console.log อัตโนมัติ | ✅ รองรับ | ❌ SWC ต้องใช้ custom transform หรือยังไม่ทำได้ |
babel-plugin-macros | ใช้กับ linaria, emotion, tailwind macros | ✅ รองรับ | ❌ ยัง |
babel-plugin-module-resolver | ตั้ง alias import แบบ custom | ✅ รองรับ | 🔶 SWC รองรับแบบจำกัดใน config (paths) |
⚠️ สรุปข้อจำกัดของ SWC (กลางปี 2025)
| ข้อจำกัด | คำอธิบาย |
|---|---|
| ❌ ยังไม่รองรับ Babel plugin ecosystem | เช่น styled-components, decorators |
❌ ยังไม่รองรับ macro system เช่น babel-plugin-macros | ใช้กับ emotion, tailwind, linaria |
| 🔧 ต้องใช้ Rust custom plugin (ซับซ้อนกว่า Babel) | ไม่สามารถเขียน JS plugin ง่าย ๆ ได้เหมือน Babel |
| ⚠️ ขาดบาง syntax proposal | Decorators, pipeline, partial application เป็นต้น |
✅ แล้วเมื่อไรควรใช้ Babel แทน SWC?
| กรณี | ใช้ Babel |
|---|---|
ใช้ @decorators | ✅ |
ใช้ styled-components SSR mode | ✅ |
ใช้ import optimization (babel-plugin-import) | ✅ |
| ใช้ macro (tailwind macros, emotion macros) | ✅ |
| ต้องเขียน plugin เองด้วย JS | ✅ |
✅ ใช้ SWC ได้เลย เมื่อ...
| กรณี | เหมาะกับ SWC |
|---|---|
| ใช้ React + TypeScript ธรรมดา | ✅ |
| ไม่ใช้ plugin พิเศษ | ✅ |
| อยาก build เร็วมาก | ✅ |
ใช้ Next.js / Vite และไม่ใช้ babel.config.js | ✅ |
🔧 ทางเลือกบางส่วนใน SWC
ถ้าอยากใช้ styled-components กับ SWC ➤ ใช้ Emotion แทน (SWC รองรับ JSX pragma)
หากอยากลบ console.log ➤ ทำผ่าน build tool เช่น esbuild plugin หรือ manual
ถ้าอยากใช้ alias ➤ SWC รองรับ paths ใน tsconfig.json
✨ สรุป
| เปรียบเทียบ | Babel | SWC |
|---|---|---|
| Plugin ecosystem | ✅ ครอบคลุม | ❌ ยังไม่เต็ม |
| ความเร็ว | ช้ากว่า | ✅ เร็วกว่ามาก |
| Customization | ✅ เขียน plugin JS ได้เลย | ❌ ต้องเขียน Rust |
| ใช้กับ Next.js | ✅ fallback mode | ✅ default compiler |