مقدمهای بر کامپوننتها در دنیای توسعه وب
تا حالا به این فکر کردی که چطوری یک سایت از بخشهای کوچکتر کنار هم ساخته میشه؟ این بخشهای کوچک همون کامپوننتها هستن! تو دنیای توسعه وب مدرن، مخصوصاً وقتی پای React یا Next.js وسط باشه، همه چیز با کامپوننتها شروع میشه. کامپوننتها کمک میکنن کد ما تمیز، قابل نگهداری و قابل استفاده مجدد باشه. امروز قراره با هم یاد بگیریم چطوری تو نسخه جدید Next.js 15 کامپوننتهای ساده بسازیم.
چرا Next.js 15 برای ساخت کامپوننتها عالی است؟
Next.js همیشه یکی از محبوبترین فریمورکها برای توسعه React اپلیکیشنها بوده. نسخه ۱۵ با کلی بهبود و امکانات تازه اومده که ساختن و مدیریت کامپوننتها رو خیلی سادهتر کرده. سیستم App Router قویتر شده، پرفورمنس بهبود پیدا کرده و کلی امکانات جدید اضافه شده که ساختار پروژههامون رو حرفهایتر میکنه. خلاصه بخوام بگم: با Next.js 15، ساخت کامپوننتها مثل آب خوردنه!
آمادهسازی محیط توسعه
نصب Node.js و Next.js
قبل از هر چیزی، باید Node.js رو نصب داشته باشی. اگه نداری، از سایت رسمی Node.js آخرین نسخه رو دانلود کن و نصبش کن. بعدش خیلی راحت با دستور زیر میتونی Next.js رو تو پروژهات داشته باشی:
npx create-next-app@latest my-nextjs-app
ایجاد یک پروژه جدید در Next.js 15
بعد از اجرای دستور بالا، چند سوال ازت پرسیده میشه. مطمئن شو گزینه App Router رو فعال میکنی، چون میخوایم از ساختار جدید استفاده کنیم. بعد از اینکه پروژه ساخته شد، وارد پوشه پروژه شو:
cd my-nextjs-app
npm run dev
تبریک! حالا یه پروژه Next.js 15 داری که آمادهست برای ساخت کامپوننت.
مفهوم کامپوننت در Next.js
کامپوننتهای تابعی (Functional Components)
function HelloWorld() {
سلام دنیا!
}
تو Next.js (و React)، کامپوننتها در واقع فانکشنهایی هستن که یه تکه UI برمیگردونن. خیلی ساده! مثلا یه کامپوننت ساده میتونه اینطوری باشه:تفاوت بین کامپوننت و صفحه (Page)
توی Next.js چیزی که داخل پوشه /app یا /pages قرار میگیره و مستقیماً یه مسیر (Route) ایجاد میکنه، صفحه محسوب میشه. ولی بقیه اجزایی که برای ساخت این صفحات استفاده میشن، کامپوننت هستن.
اولین کامپوننت ساده خود را بسازید
ساخت یک دکمه ساده
بیا یه دکمه ساده بسازیم. داخل پوشه components یه فایل جدید به اسم MyButton.jsx بساز و این کد رو بنویس:
export default function MyButton() {
returnکلیک کن!;
}
آسون بود، نه؟
اضافه کردن استایل به کامپوننت
حالا بیایم کمی استایل بهش بدیم. مثلا:
export default function MyButton() {
return (
کلیک کن!
);
}
یا بهتر از اون، از فایل CSS جداگانه استفاده کنیم تا پروژه مرتبتر بمونه.
نحوه استفاده از کامپوننت در صفحات مختلف
برای استفاده از MyButton داخل صفحه اصلی (/app/page.jsx)، کافیه اینطوری ایمپورت و استفاده کنیم:
import MyButton from '../components/MyButton';
export default function Home() {
return (
خوش اومدی!
); }
هر جا بخوای، میتونی این دکمه رو دوباره استفاده کنی.
نکات کلیدی در سازماندهی کامپوننتها
ساختار پوشهبندی مناسب
خیلی مهمه که از همون اول ساختار خوبی داشته باشیم. معمولاً یک پوشه components/ درست میکنیم و هر کامپوننت داخل فایل مخصوص خودش قرار میگیره.
اهمیت تفکیک کامپوننتها
بهتره هر چیزی که مستقل قابل استفاده است، تبدیل به یک کامپوننت جداگانه بشه. اینجوری پروژه هم تمیزتره و هم توسعه راحتتر.
معرفی کامپوننتهای Stateful در Next.js
کامپوننتهای stateful یعنی اونایی که حالت (state) داخلی دارن. مثلا دکمهای که تعداد کلیکها رو میشمره:
import { useState } from 'react';
export default function CounterButton() {
const [count, setCount] = useState(0);
return ( setCount(count + 1)}>
کلیک شده: {count} بار
);
}
اینجا با هر بار کلیک، state تغییر میکنه و صفحه بهروز میشه!
استفاده از Props برای سفارشیسازی کامپوننتها
Props به ما اجازه میدن که اطلاعات به کامپوننتها پاس بدیم. مثلا:
export default function MyButton({ label }) {
return{label};
}
و اینجوری استفاده میکنیم:
خیلی شیک و کاربردی!
بهترین شیوهها در ساخت کامپوننتهای ساده و قابل توسعه
-
اسم کامپوننتها رو واضح انتخاب کن.
-
هر کامپوننت فقط یک وظیفه داشته باشه.
-
از استایلهای جداگانه استفاده کن.
-
کامپوننتها رو تست کن (با ابزارهایی مثل Jest).
اشتباهات رایج هنگام ساخت کامپوننت و راهکارها
-
نوشتن کدهای تکراری: با استفاده از props یا children کدها رو DRY کن.
-
استفاده نادرست از کلیدها در لیستها: همیشه کلید یکتا بده.
-
مخلوط کردن منطق زیاد در یک کامپوننت: بهتره منطق جدا بشه.
فزودن استایل به کامپوننتها با CSS Modules در Next.js 15
بعد از ساخت کامپوننتهای ساده در Next.js، وقتشه بهشون استایل بدیم تا ظاهر زیبایی هم داشته باشن. یکی از روشهای پیشنهادی در Next.js استفاده از CSS Modules هست. این روش باعث میشه کلاسها به صورت scoped فقط در همون فایل کامپوننت معتبر باشن و با بقیه بخشها تداخل پیدا نکنن.
برای استفاده از CSS Modules کافیه یه فایل CSS با پسوند .module.css بسازید. مثلاً اگه کامپوننتتون Button.js هست، فایلتون میتونه Button.module.css باشه. بعدش این فایل رو توی کامپوننت ایمپورت میکنید و از کلاسهای تعریفشده استفاده میکنید.
مثال ساده:
/* Button.module.css */
.primary {
background-color: #0070f3;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
و در فایل کامپوننت:
import styles from './Button.module.css'
export default function Button() {
return <button className={styles.primary}>کلیک کن</button>
}
این ساختار به شما کمک میکنه تا بدون نگرانی از تداخل با کلاسهای دیگه، هر کامپوننت رو جداگانه استایلدهی کنید. این موضوع بهخصوص توی پروژههای بزرگ اهمیت بیشتری داره و باعث مدیریت بهتر کدها میشه.
یکی از نکات مهم استفاده از CSS Modules در Next.js اینه که کاملاً با TypeScript و ابزارهای توسعه هماهنگه، و حتی بعضی ادیتورها مثل VSCode پیشنهادهای خودکار هم برای کلاسها نشون میدن.
اگر بخواهید چند کلاس رو ترکیب کنید، میتونید از Template Literals استفاده کنید:
<button className={`${styles.primary} ${styles.rounded}`}>دکمه ترکیبی</button>
در صورت نیاز به استفاده از شرایط خاص، مثل حالتهای فعال یا غیرفعال، میتونید از کتابخانههایی مثل classnames استفاده کنید تا مدیریت کلاسها سادهتر بشه.
در نهایت، استفاده از CSS Modules در Next.js نه تنها روند توسعه رو بهینهتر میکنه، بلکه ساختار پروژه رو هم منظمتر نگه میداره. پیشنهاد میکنم تو همه کامپوننتهاتون این روش رو امتحان کنید.
استفاده از Props برای سفارشیسازی کامپوننتها
بعد از آشنایی با ساخت کامپوننتها و استایلدهی اونها، وقتشه که یاد بگیریم چطور اونها رو قابل سفارشیسازی کنیم. این کار با استفاده از props انجام میشه. Props مخفف "properties" هست و اطلاعاتی هستن که میتونیم از والد به فرزند بفرستیم.
مثال ساده:
function Greeting({ name }) {
return <p>سلام {name}!</p>;
}
و استفاده ازش:
<Greeting name="علی" />
با استفاده از props میتونید کامپوننتهاتون رو پویا کنید. مثلا یه دکمه میتونه متن، رنگ و عملکرد کلیک متفاوتی داشته باشه، بسته به propهایی که بهش پاس داده میشه.
مثال پیشرفتهتر:
function Button({ label, onClick }) {
return <button onClick={onClick}>{label}</button>;
}
در این مثال، تابع onClick از خارج پاس داده میشه، پس دکمه میتونه عملکردهای متفاوتی داشته باشه بدون اینکه نیاز به تغییر داخل خودش باشه. این یعنی جداسازی منطق و طراحی - چیزی که همیشه توی توسعه وب توصیه میشه.
یکی دیگه از مزایای استفاده از props اینه که تستنویسی برای کامپوننتها آسونتر میشه. چون میتونید براحتی حالتهای مختلفی رو با مقادیر مختلف props بررسی کنید.
همچنین میتونید از defaultProps استفاده کنید تا اگر prop خاصی ارسال نشد، مقدار پیشفرض براش قرار بگیره. البته توی نسخههای جدید React توصیه شده بهجای اون از مقداردهی پیشفرض مستقیم توی پارامترها استفاده بشه:
function Button({ label = "کلیک کن" }) { ... }
در نهایت، یادگیری کار با props اولین قدم برای ساخت کامپوننتهای حرفهایتره. اگه تا الان کامپوننتهاتون فقط متن ثابت نشون میدادن، حالا وقتشه که با استفاده از props اونها رو پویا کنید.
ترکیب کامپوننتها برای ساخت رابطهای پیچیدهتر
تا اینجا یاد گرفتیم چطور یه کامپوننت ساده بسازیم و با استایل و props سفارشیسازیش کنیم. حالا وقتشه یاد بگیریم چطور چند کامپوننت رو با هم ترکیب کنیم تا رابطهای پیچیدهتری بسازیم.
مثلاً فرض کنید میخواید یه کارت اطلاعات بسازید که شامل عنوان، تصویر و دکمه باشه. این کارت میتونه از سه کامپوننت مستقل ساخته بشه: Title, Image, و Button.
ساخت این مدل از ساختار باعث میشه بتونید کامپوننتهاتون رو بهراحتی در پروژههای دیگه هم استفاده کنید، بدون اینکه کد تکراری بنویسید. این دقیقاً شبیه تکهتکه کردن یه پازل بزرگه.
مثال ترکیبی:
function Card({ title, imgUrl }) {
return (
<div>
<Image src={imgUrl} />
<Title text={title} />
<Button label="مشاهده" />
</div>
);
}
این کار به شما کمک میکنه تا هم ساختار پروژه منظمتر باشه، هم توسعه و نگهداری اون راحتتر انجام بشه. اگه روزی فقط دکمه یا عکس کارت عوض بشه، لازم نیست کل ساختار رو دستکاری کنید.
در پروژههای واقعی، معمولاً رابطهای کاربری خیلی پیچیده هستن. اما اگه یاد بگیرید اونها رو به کامپوننتهای کوچیکتر بشکنید، هم توسعه سریعتر میشه، هم تیمیتر میتونید کار کنید.
حتی میتونید از تکنیکی بهنام Composition استفاده کنید که با استفاده از children امکان انعطافپذیری بیشتری به کامپوننتها میده. مثلاً:
function Card({ children }) {
return <div className="card">{children}</div>;
}
و استفاده از اون:
<Card>
<Title text="عنوان" />
<p>متن توضیحی</p>
</Card>
در آخر، ترکیب کامپوننتها مرحلهایه که برنامهنویس از مبتدی به حرفهای تبدیل میشه. چون یاد میگیره چطور یه رابط پیچیده رو به اجزای سادهتر بشکنه و مدیریت کنه.
خلاصه و جمعبندی
خب، دیدی چقدر راحت میشه تو Next.js 15 کامپوننت ساخت؟! فقط کافیه بدونی که کامپوننتها قلب یک پروژه React و Next.js هستن. با رعایت چند تا نکته ساده میتونی کامپوننتهایی بنویسی که هم قابل استفاده مجدد باشن و هم پروژهات رو حرفهایتر کنن. پس دست به کار شو و اولین کامپوننت خودتو بساز!
ایجاد کامپوننت در Next.js, کامپوننتهای ریاکت, آموزش Next.js, ساخت کامپوننت ساده, Next.js 15, طراحی رابط کاربری با ریاکت, کامپوننتسازی در جاوااسکریپت, توسعه فرانتاند, آموزش کامپوننت تابعی, ساختار پروژه در Next.js, آموزش برنامهنویسی React, توسعه رابط کاربری مدرن, کامپوننت قابل استفاده مجدد, آموزش JSX, شروع کار با Next.js
