DEV Community

c_nooknook_daily_prompt
c_nooknook_daily_prompt

Posted on

รู้หรือไม่ Next.js ใช้ SWC ด้วยนะ!

#webdev #programming #javascript #beginners

ตั้งแต่ Next.js v12 เป็นต้นมา
Next.js ใช้ SWC (Rust-based compiler) แทน Babel เป็นค่าเริ่มต้น
เพราะ:

  • เร็วกว่า ~17x
  • ใช้ memory น้อย
  • แปล JSX/TS ได้เหมือน Babel

แต่ถ้าคุณสร้าง babel.config.js ➤ Next.js จะ fallback ไปใช้ Babel แทนทันทีค่ะ

Ref: nextjs-compiler

คำถาม คำตอบ
❓ 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 }]
  ]
};
Enter fullscreen mode Exit fullscreen mode
กรณี ทำไมไม่ต้อง
ใช้ 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

โบนัส
Alias Paths กับ SWC

  • SWC รองรับ alias paths ผ่านการตั้งค่าใน tsconfig.json หรือ jsconfig.json เช่น
  • SWC จะอ่าน config นี้และทำงานร่วมกับ bundler (เช่น Next.js, Vite) เพื่อ resolve alias ได้
  • แต่ SWC เองไม่มีระบบ plugin สำหรับ alias แบบ Babel (เช่น babel-plugin-module-resolver) ซึ่งอาจทำให้บางเคสละเอียดไม่ได้เหมือน Babel

SWC รองรับ alias paths แบบพื้นฐานผ่าน tsconfig.json ได้
แต่ถ้า alias ซับซ้อนหรืออยากตั้งแบบละเอียด อาจต้องใช้ Babel plugin

{
  "compilerOptions": {
    /* alias path */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
  }
}
Enter fullscreen mode Exit fullscreen mode

i18n กับ SWC

การทำ i18n โดยทั่วไปจะมี 2 แบบหลัก:

  • Runtime i18n (เช่น react-intl, next-i18next) — SWC ไม่มีปัญหาเพราะเป็นโค้ด JavaScript ปกติ
  • Compile-time i18n (เช่น babel-plugin-react-intl ที่ดึงข้อความแปลจาก source code แบบ static) — Babel Plugin นี้จะไม่ทำงานกับ SWC

สรุป:

  • SWC ไม่รองรับ plugin สำหรับ compile-time extraction ของ i18n
  • ถ้าต้องการทำ extraction อัตโนมัติ ต้องใช้ Babel หรือเครื่องมืออื่นร่วม
เรื่อง SWC Babel
Alias Paths รองรับผ่าน tsconfig (พื้นฐาน) รองรับผ่าน plugin ละเอียดกว่า
i18n (runtime) รองรับ รองรับ
i18n (compile-time extraction) ไม่รองรับ plugin รองรับ plugin

Top comments (0)