React چیست و چه تفاوتی با Next.js دارد؟
وقتی تصمیم گرفتم سایت شخصی خودم را بسازم، یکی از اولین سؤال‌هایم این بود: بهتر است با React شروع کنم یا Next.js؟
برای پاسخ به این سؤال، ابتدا باید بدانیم هرکدام چه کاری انجام می‌دهند.
React چیست؟
React یک کتابخانه JavaScript برای ساخت رابط کاربری است. با استفاده از آن می‌توانیم صفحه را به اجزای کوچک‌تر و قابل استفاده‌ی مجدد تقسیم کنیم.
برای مثال، هدر، کارت پروژه‌ها و دکمه‌ی تغییر تم می‌توانند کامپوننت‌های مستقلی باشند.
function Welcome() {
return <h1>سلام، به سایت من خوش آمدید!</h1>;
}
export default Welcome;
این کامپوننت یک عنوان ساده نمایش می‌دهد. با بزرگ‌تر شدن پروژه، می‌توانیم اجزای بیشتری بسازیم و آن‌ها را کنار هم قرار دهیم.
Next.js چیست؟
Next.js فریم‌ورکی مبتنی بر React است که ابزارهای بیشتری برای ساخت وب‌سایت در اختیار ما قرار می‌دهد؛ از جمله:
- سیستم مسیریابی برای ساخت صفحات مختلف
- امکان تولید صفحات استاتیک هنگام Build
- مدیریت عنوان و توضیحات صفحات برای موتورهای جست‌وجو
- امکاناتی برای مدیریت فایل‌ها و ساختار پروژه
به کمک این امکانات، لازم نیست تمام زیرساخت‌های یک وب‌سایت را از ابتدا طراحی کنیم.
تفاوت اصلی React و Next.js
React ابزار ساخت رابط کاربری را فراهم می‌کند؛ Next.js علاوه بر React، ساختار و قابلیت‌های بیشتری برای ساخت یک وب‌سایت کامل ارائه می‌دهد.
به همین دلیل، این دو الزاماً رقیب یکدیگر نیستند؛ Next.js از React استفاده می‌کند.
چرا برای سایت شخصی‌ام Next.js را انتخاب کردم؟
هدف من ساخت یک سایت شخصی شامل پورتفولیو و وبلاگ فارسی و انگلیسی است. همچنین می‌خواهم از Markdown برای نوشتن مقاله‌ها استفاده کنم و سایت را روی هاست معمولی cPanel منتشر کنم.
با توجه به این نیازها، خروجی استاتیک Next.js انتخاب مناسبی است. می‌توانم هنگام Build صفحات را تولید کنم و فایل‌های خروجی را روی هاست قرار دهم، بدون اینکه برای نمایش سایت به اجرای دائمی Node.js روی هاست نیاز داشته باشم.
قدم بعدی
در ادامه‌ی مسیر یادگیری، می‌خواهم بیشتر با کامپوننت‌ها، Props، مدیریت وضعیت با Hooks و ساختار صفحات در Next.js آشنا شوم و آن‌ها را در پروژه‌ی واقعی خودم به کار ببرم.