کتابخانه NextUI در ری اکت و Next.js ( کتابخانه رابط کاربری مدرن، سریع و زیبا )
اگه شما هم مثل من دمبال یک UI liberary مدرن، سریع و زیبا هستید و از دست کتابخانه هایی مثل Ant Design و Material UI خسته شدید، تو این مقاله با من همراه باشید چون میخوایم با کتابخانه NextUI آشنا بشیم 🙂
داستان چیه ؟!
قدیما که کتابخانه NextUI و سایر UI Liberary های مدرن معرفی نشده بودن، ما مجبور بودیم از بوت استرپ و MUI و .. استفاده کنیم! حقیقتا گزینه های جذاب و زیاد دیگه ای هم نداشتیم که بخوایم سراغشون بریم.
اما تازگیا اسم کتابخانه Next UI داره به گوشمون میخوره و زمانیکه وارد وبسایتش میشیم، میبینیم که چقدر کامپوننت های زیبا، مدرن و سریعی داره !
تو تصویر زیر میشه چند نمونه از این کامپونت هارو دید :
کتابخانه NextUI چیست ؟
کتابخانه NextUI یک UI liberary مدرن، زیبا و سریع هست که مجموعه بزرگی از کامپوننت های آماده و از پیش ساخته شده رو در اختیار ما قرار میده!
اگه با فریمورک Next.js کار میکنید حتما مثل من کلی چالش و ارور سرور ( Server Component و Client Component ) گرفتید!
خوشبختانه تو کتابخانه NextUI دیگه خبری از این مشکلات و ناسازگاری ها نیست چون تیم Vercel ( توسعه دهنده خود Next.js ) این کتابخانه رو توسعه دادن.
بریم ببینیم مهمترین ویژگی های کتابخانه Next UI چی هستن ؟
پلاگین های کاربردی !
زمانیکه از Next UI در ری اکت یا Next.js استفاده میکنیم، میتونیم از کلی پلاگین کاربردی استفاده کنیم. هرکدوم از این پلاگین ها یک کاربرد مشخص دارن و کار ما رو تو یک زمینه راحت میکنن.
مثلا اگه قصد پیاده سازی حالت دارک مود در NextUI داشته باشیم، میتونیم از پلاگین use-dark-mode استفاده کنیم و نیازی نیست کلی زمان بزاریم تا این ابزار رو خودمون بنویسیم!
سرعت بالای Next UI
تمامی کامپوننت ها و اِلِمان های Next-UI به کمک کتابخانه Tailwind CSS توسعه داده شدن و این فوق العادس!
همین موضوع باعث شده که استایل های اپیکیشن ما در زمان Build ساخته بشن و هیچ استایل غیرضروری و بلااستفاده تو پروژه نداشته باشیم!
بر خلاف کتابخانه هایی مثل کتابخانه Material UI که کلی استایل و CSS غیرضروری و بلااستفاده به پروژه ما اضافه میکردن و باعث میشدن حجم پروژه ما بالا بره!
حالت دارک مود / لایت مود
دیگه نیازی نیست برای پیاده سازی حالت دارک مود تو اپیکیشن خودمون کلی اذیت بشیم! کتابخانه Next UI خیلی ساده این پروسه رو مدیریت میکنه، برای اینکه اپیکیشن خودمون رو به حالت دارک مود ببریم، کافیه به اِلمان Parent اپیکیشن خودمون کلاس dark بدیم!
همچنین اگه بهش کلاس light بدیم، کل اپیکیشن ما حالت لایت مود میگیره.
همچنین یک کاستوم هوک ( use-dark-mode ) و یک ابزار ( next-themes ) برای مدیریت حالت دارک مود در اختیار ما گذاشته که باعث شدن پیاده سازی حالت Dark Mode خیلی خیلی آسون بشه.
یادگیری خیلی آسون!
یادگیری کتابخانه Next UI خیلی آسونه! خودشون گفتن هدف ما این بوده که کاربر های ما بتونن خیلی ساده از NextUI استفاده کن.
همچنین با مراجعه به وبسایت nextui.org میبینیم که خودشون برای هر کامپوننت کلی مثال + تیکه کد گذاشتن و موارد مختلف رو به سادگی توضیح دادن!
قابلیت شخصی سازی خیلی خیلی زیاد!
کامپوننت های آماده NextUI قابلیت شخصی سازی خیلی زیادی دارن! شاید شما هم تو شخصی سازی کامپوننت های Antd یا MUI کلی اذیت شده باشید ولی دیگه تو NextUI از این خبرا نیست 🙂
تو کتابخانه NextUI هر اِلِمان یک ویژگی به اسم data-slot داره و ما میتونیم به کمک همین data-slot استایل های دلخواه خودمون رو به اون کامپوننت یا اِلِمان های فرزندش ( اِلِمان های تو در تو ) بدیم!
مثلا فرض کنید داریم از کامپوننت Modal خود NextUI استفاده میکنیم. داخل این کامپوننت یک div وجود داره و ما میخوایم به این div استایل دلخواه خودمون رو بدیم.
کافیه اون div رو پیدا کنیم ( به کمک ابزار inspect مرورگر ) و data-slotش رو کپی کنیم. حالا میتونیم در زمان استفاده از کامپوننت Modal به اون data-slot، استایل دلخواه خودمون رو در قالب Tailwind CSS اعمال کنیم.
انیمیشن های جذاب!
کتابخانه NextUI در ری اکت از Framer Motion برای اعمال انیمیشن های جذاب روی کامپوننت ها استفاده میکنه. این قضیه در پشت صحنه اتفاق میوفته و ما درگیر خود کتابخانه Framer Motion نمیشیم.
آموزش نصب کتابخانه NextUI
برای نصب کتابخانه Next-UI کافیه دستور زیر رو در ترمینال vsCode خودمون وارد کنیم :
npm i @nextui-org/react framer-motion
سپس باید Tailwind CSS رو کانفیگ کنیم، کافیه به فایل tailwind.config.js مراجعه کنیم و کد های زیر رو بهش اضافه کنیم :
// tailwind.config.js
const {nextui} = require("@nextui-org/react");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// ...
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [nextui()],
};
حالا باید به Entry Point ( روت ) پروژه بریم و از NextUIProvider استفاده کنیم تا امکان استفاده از این کتابخانه رو در کل اپیکیشن داشته باشیم.
اگه از Next.js استفاده میکنیم، کافیه وارد فایل Provider بشیم. همچنین اگه از ری اکت استفاده میکنیم باید به فایل App.js مراجعه کنیم و بصورت زیر عمل کنیم :
import * as React from "react";
// 1. import `NextUIProvider` component
import {NextUIProvider} from "@nextui-org/react";
function App() {
// 2. Wrap NextUIProvider at the root of your app
return (
<NextUIProvider>
<YourApplication />
</NextUIProvider>
);
}
همچنین میتونیم با مراجعه به بخش Installation راهنمای نصب این کتابخانه رو مطالعه کنیم.
کتابخانه Next UI از راستچین پشتیبانی میکنه ؟
هم بله و هم خیر!
من آخرین پروژه خودم رو با Next UI توسعه دادم ( با قبول یه عالمه ریسک! ) چون الان که دارم این مقاله رو مینویسم این کتابخانه جامعه آماری خیلی بزرگی نداره و از خیلیا شنیده بودم که میگفتن از RTL پشتیبانی نمیکنه.
حقیقت موضوع اینه که 80% کامپوننت های NextUI از راستچین ( RTL ) پشتیبانی میکنن و 20% مابقی رو خودمون باید شخصی سازی کنیم تا در حالت راستچین به درستی نمایش داده بشن.
البته مطمئنا به زودی تیم توسعه NextUI در قالب بروزرسانی هایی که ارائه میکنن، مابقی کامپوننت هارو هم راستچین میکنن.
جمع بندی
کتابخانه NextUI یک کتابخانه UI مدرن، سریع و زیباست که کامپوننت های آماده و از پیش ساخته شده کاربردی در اختیار ما میزاره و کلی مزیت داره از جمله اینکه هیچ Style اضافی به پروژمون اضافه نمیکنه چون به کمک Tailwind CSS توسعه داده شده.
تجربه کار با Next UI لذت بخش و زیباست! پیشنهاد میکنم برای یکبار هم که شده از next-ui استفاده کنید تا با UI liberary های قدیمی و سنگین مثل بوت استرپ برای همیشه خداحافظی کنید 🙂
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام سوالی داشتم من الان با کتابخانه های nextUi مشکلی دارم استایل های خودش که اعمال نیمشه میخوای شخصی سازی کنی هم نمیشه کل doc خوندم انجام دادم تست کردم از بقیه پرسیدم چرا اینطوری حتی برای استایل دهی هم با روش تلویندو هم کار نمکینه باید حتم به صورت style={{}} پیش مشکلش چیه ممنون میشم از راهنماییتون 🙂
سلام امیرجان وقت بخیر
بنظرم در ابتدا کانفیگ Nextui رو بررسی کنین و مطمئن بشین که کانفیگش رو درست انجام دادید.
بعد مطمئن بشین که تداخلی با سایر کتابخانه ها مثل Tailwind نداشته باشه ( اولویت import تیلویند و NEXUI رو عوض کنین )
اگه این 2 مورد رو بررسی کنین و اوکی باشه، نباید مشکلی داشته باشین.