Next.js یکی از محبوبترین فریمورکهای مبتنی بر React است که برای ساخت وبسایتها و اپلیکیشنهای مدرن استفاده میشود. اگر با React آشنا باشید، میدانید که React بیشتر برای ساخت رابط کاربری کاربرد دارد؛ اما Next.js امکانات بیشتری در اختیار ما قرار میدهد و توسعه پروژههای واقعی را سادهتر، سریعتر و حرفهایتر میکند.
در این جلسه با مفهوم Next.js آشنا میشویم، تفاوت آن را با React بررسی میکنیم، محیط توسعه را آماده میکنیم و در پایان اولین پروژه Next.js خود را اجرا خواهیم کرد.
Next.js چیست؟
Next.js یک فریمورک React است که امکانات مهمی مثل مسیریابی آماده، رندر سمت سرور، تولید صفحات استاتیک، بهینهسازی تصاویر، مدیریت بهتر سئو و ساختار استاندارد پروژه را در اختیار ما قرار میدهد.
در React معمولی، بسیاری از این امکانات باید بهصورت جداگانه نصب و تنظیم شوند. برای مثال اگر بخواهیم بین صفحات مختلف جابهجا شویم، معمولاً باید از کتابخانههایی مثل React Router استفاده کنیم. اما در Next.js سیستم مسیریابی از قبل وجود دارد و فقط با ساخت فایلها و پوشهها میتوانیم صفحات مختلف سایت را ایجاد کنیم.
چرا از Next.js استفاده میکنیم؟
یکی از مهمترین دلایل استفاده از Next.js، بهبود سرعت و سئو سایت است. در بسیاری از پروژههای React، محتوای صفحه بعد از بارگذاری JavaScript در مرورگر ساخته میشود. این موضوع میتواند برای موتورهای جستوجو و سرعت اولیه صفحه چالش ایجاد کند.
Next.js این مشکل را با روشهایی مثل Server-Side Rendering و Static Site Generation حل میکند. یعنی میتواند بخشی از صفحات را از قبل یا روی سرور آماده کند تا کاربر و موتور جستوجو سریعتر محتوای صفحه را ببینند.
به همین دلیل Next.js برای ساخت سایتهای شرکتی، فروشگاهی، آموزشی، خبری، وبلاگها، پنلهای کاربری و حتی اپلیکیشنهای بزرگ انتخاب بسیار مناسبی است.
تفاوت React و Next.js
React یک کتابخانه برای ساخت رابط کاربری است، اما Next.js یک فریمورک کاملتر است که روی React ساخته شده. React به ما کمک میکند کامپوننت بسازیم، اما Next.js علاوه بر کامپوننتها، امکاناتی مثل routing، رندر سمت سرور، API routes، بهینهسازی تصاویر و ساختار پروژه را هم فراهم میکند.
به زبان ساده، React مثل موتور اصلی رابط کاربری است، اما Next.js یک ماشین کاملتر است که آن موتور را داخل یک ساختار آماده و حرفهای قرار داده است.
پیشنیازهای شروع کار
برای شروع کار با Next.js باید Node.js روی سیستم نصب باشد. Node.js به ما اجازه میدهد پروژههای JavaScript را خارج از مرورگر اجرا کنیم و از ابزارهایی مثل npm استفاده کنیم.
برای بررسی نصب بودن Node.js، میتوانیم در ترمینال دستور زیر را وارد کنیم:
node -v
اگر نسخهای مثل v18 یا بالاتر نمایش داده شد، یعنی Node.js نصب است.
برای بررسی npm هم از دستور زیر استفاده میکنیم:
npm -v
npm ابزاری است که با آن پکیجها و کتابخانههای موردنیاز پروژه را نصب میکنیم.
ساخت اولین پروژه Next.js
برای ساخت پروژه جدید Next.js، وارد پوشهای شوید که میخواهید پروژه در آن ساخته شود و دستور زیر را اجرا کنید:
npx create-next-app@latest my-next-app
در این دستور، my-next-app نام پروژه ماست. شما میتوانید هر نام دیگری برای پروژه انتخاب کنید.
بعد از اجرای دستور، چند سؤال از شما پرسیده میشود. برای شروع میتوانید گزینههای پیشفرض را انتخاب کنید. اگر از شما درباره TypeScript، ESLint، Tailwind یا App Router سؤال شد، برای پروژههای جدید بهتر است App Router را فعال نگه دارید.
بعد از ساختهشدن پروژه، وارد پوشه آن شوید:
cd my-next-app
حالا پروژه را اجرا کنید:
npm run dev
بعد از اجرای این دستور، پروژه روی آدرس زیر اجرا میشود:
http://localhost:3000
اگر این آدرس را در مرورگر باز کنید، صفحه اولیه Next.js را مشاهده میکنید.
آشنایی با ساختار پروژه
در پروژههای جدید Next.js معمولاً پوشهای به نام app وجود دارد. این پوشه محل اصلی ساخت صفحات و مسیرهای سایت است.
برای مثال فایل زیر صفحه اصلی سایت را کنترل میکند:
app/page.js
یا اگر پروژه با TypeScript ساخته شده باشد:
app/page.tsx
محتوایی که داخل این فایل قرار میدهیم، در صفحه اصلی سایت نمایش داده میشود.
فایل دیگری به نام layout.js یا layout.tsx نیز وجود دارد که ساختار کلی صفحات را مشخص میکند. برای مثال اگر بخواهیم یک هدر یا فوتر در همه صفحات سایت نمایش داده شود، معمولاً آن را در layout قرار میدهیم.
ساخت اولین صفحه ساده
فایل app/page.js یا app/page.tsx را باز کنید و محتوای آن را با کد زیر جایگزین کنید:
export default function Home() {
return (
<main>
<h1>سلام، به اولین پروژه Next.js خوش آمدید</h1>
<p>این اولین صفحه ما در Next.js است.</p>
</main>
);
}
حالا اگر مرورگر را باز کنید، متن جدید را در صفحه اصلی خواهید دید.
این یعنی پروژه با موفقیت اجرا شده و ما توانستهایم اولین صفحه خود را در Next.js بسازیم.
مسیرها در Next.js
در Next.js برای ساخت صفحه جدید کافی است داخل پوشه app یک پوشه جدید بسازیم و داخل آن فایل page.js قرار دهیم.
مثلاً برای ساخت صفحه درباره ما، این مسیر را ایجاد میکنیم:
app/about/page.js
و داخل آن مینویسیم:
export default function About() {
return (
<main>
<h1>درباره ما</h1>
<p>این صفحه درباره ماست.</p>
</main>
);
}
حالا این صفحه از آدرس زیر در دسترس است:
http://localhost:3000/about
این سیستم مسیریابی یکی از مزیتهای مهم Next.js است، چون بدون نصب کتابخانه اضافی میتوانیم صفحات مختلف ایجاد کنیم.
جمعبندی جلسه اول
در این جلسه یاد گرفتیم که Next.js چیست و چرا در پروژههای مدرن وب استفاده میشود. همچنین تفاوت آن را با React بررسی کردیم، محیط توسعه را آماده کردیم، اولین پروژه Next.js را ساختیم و با ساختار اولیه پوشهها و فایلها آشنا شدیم.
در پایان این جلسه باید بتوانید یک پروژه Next.js ایجاد کنید، آن را اجرا کنید، فایل صفحه اصلی را تغییر دهید و یک صفحه جدید مثل /about بسازید.
در جلسه بعدی میتوانیم وارد مبحث مهمتری شویم: کامپوننتها، ساختار صفحات و مسیریابی حرفهای در Next.js.
