NextJS: React UI Library

วันพุธที่ 26 มีนาคม พ.ศ. 2568

การใช้ Component Library ใน Next.js: เลือก Chakra UI, MUI หรือ shadcn/ui ดี?

ถ้าไม่อยากเขียน CSS เอง ให้ Component Library จัดการให้เถอะ!

การทำเว็บให้ดูดี ไม่ใช่แค่โค้ดดี แต่ต้องมี UI ที่สวยด้วย แต่การเขียน CSS เองมันก็เหนื่อยใช่ไหม? 😵‍💫 ถ้างั้นลองใช้ Component Library ที่มี UI สวยๆ ให้ใช้เลยดีกว่า

ในบทความนี้ เราจะมาแนะนำ 3 ตัวเลือกยอดนิยมสำหรับ Next.js ได้แก่ Chakra UI, MUI และ shadcn/ui พร้อมตัวอย่างโค้ดให้คุณลองใช้เลย

🚀 Component Library คืออะไร?

Component Library คือชุดของ UI Components (เช่น ปุ่ม, ฟอร์ม, การ์ด) ที่ออกแบบมาพร้อมใช้งาน ช่วยให้เรา ไม่ต้องเขียน CSS เอง และยังได้ UX ที่ดีขึ้น

✅ ทำไมต้องใช้ Component Library?

ลดเวลาทำงาน 👉 ไม่ต้องสร้าง UI จากศูนย์
รองรับ Responsive 👉 ใช้ได้ทั้งมือถือและเดสก์ท็อป
เข้ากันได้ดีกับ Next.js 👉 โหลดเร็ว, รองรับ SSR

Chakra UI – UI ที่ใช้ง่ายสุดๆ 😍

🔹 ข้อดีของ Chakra UI

✅ ใช้ Props-based Styling (ไม่ต้องเขียน CSS)
✅ รองรับ Dark Mode อัตโนมัติ
✅ มี Flexbox & Grid พร้อมใช้

🛠 ติดตั้ง Chakra UI

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

🌟 ใช้ Chakra UI ใน Next.js

1️⃣ ห่อแอปด้วย <ChakraProvider>

แก้ไข pages/_app.js

import { ChakraProvider } from "@chakra-ui/react";

export default function MyApp({ Component, pageProps }) {
return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
);
}

2️⃣ ลองใช้ปุ่มจาก Chakra UI

สร้าง pages/index.js

import { Button, Box, Text } from "@chakra-ui/react";

export default function Home() {
return (
    <Box p={5}>
      <Text fontSize="xl">Hello Chakra UI! 👋</Text>
      <Button colorScheme="blue" mt={3}>
        Click Me
      </Button>
    </Box>
);
}

🔥 จุดเด่น:

colorScheme="blue" 👉 เปลี่ยนสีปุ่มง่ายๆ
Box 👉 ใช้แทน <div> และมี spacing props เช่น p={5}

MUI (Material UI) – UI มาตรฐานองค์กร 🏢

🔹 ข้อดีของ MUI

✅ ดีไซน์มาตรฐาน Google Material Design
✅ คอมโพเนนต์เยอะมาก (Button, Table, Modal ฯลฯ)
✅ มี Theme System ปรับแต่งได้

🛠 ติดตั้ง MUI

npm install @mui/material @emotion/react @emotion/styled

🌟 ใช้ MUI ใน Next.js

1️⃣ ห่อแอปด้วย <ThemeProvider>

แก้ไข pages/_app.js

import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme();

export default function MyApp({ Component, pageProps }) {
return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
);
}

2️⃣ ลองใช้ปุ่มจาก MUI

สร้าง pages/index.js

import { Button, Container, Typography } from "@mui/material";

export default function Home() {
return (
    <Container>
      <Typography variant="h4" gutterBottom>
        Welcome to MUI 🚀
      </Typography>
      <Button variant="contained" color="primary">
        Click Me
      </Button>
    </Container>
);
}

🔥 จุดเด่น:

variant="contained" 👉 ปุ่มแบบพื้นหลังทึบ
Typography 👉 ใช้แทน <h1> หรือ <p>

shadcn/ui – UI ที่เบาและยืดหยุ่นสุดๆ 😎

🔹 ข้อดีของ shadcn/ui

✅ ใช้ Tailwind CSS (แต่งสไตล์ง่าย)
✅ ไม่มี JS Runtime (เร็วมาก)
✅ คัดลอกโค้ดมาใช้ได้เลย

🛠 ติดตั้ง shadcn/ui

npx shadcn-ui@latest init

จากนั้นเลือก "Install components" เพื่อนำคอมโพเนนต์มาใช้

🌟 ใช้ shadcn/ui ใน Next.js

1️⃣ ติดตั้ง Button

npx shadcn-ui@latest add button

2️⃣ ลองใช้ปุ่มจาก shadcn/ui

สร้าง pages/index.js

import { Button } from "@/components/ui/button";

export default function Home() {
return (
    <div className="p-5">
      <h1 className="text-xl font-bold">Hello shadcn/ui!</h1>
      <Button className="mt-3">Click Me</Button>
    </div>
);
}

🔥 จุดเด่น:

ใช้ Tailwind ได้เลย (className="text-xl")
ปรับแต่งสไตล์เองได้เต็มที่

🤔 สรุป: ควรเลือกตัวไหนดี?

Library	เหมาะกับใคร?
Chakra UI	ถ้าต้องการ Props-based Styling และใช้ง่าย
MUI	ถ้าต้องการ Material Design และคอมโพเนนต์เยอะ
shadcn/ui	ถ้าต้องการ UI เร็ว + ใช้ Tailwind

👉 ถ้าคุณชอบ:

ความง่าย + Dark Mode อัตโนมัติ 👉 Chakra UI
คอมโพเนนต์เยอะ + สไตล์องค์กร 👉 MUI
ใช้ Tailwind + เร็วที่สุด 👉 shadcn/ui

🎉 สรุป

Component Library ช่วยให้ทำเว็บเร็วขึ้น
Chakra UI ใช้ง่ายสุด ปรับแต่งสะดวก
MUI เหมาะกับแอปองค์กร
shadcn/ui เบา เร็ว ใช้ Tailwind ได้เต็มที่

ลองใช้ดู แล้วจะติดใจ! 😉

NextJS