Next.js بسیاری از بهینه‌سازی‌ها را در برنامه React شما انجام می‌دهد تا شما مجبور به انجام آن‌ها نباشید
Next.js چارچوب React با تعدادی بهینه‌سازی عملکرد داخلی است. ایده اصلی پشت این چارچوب این است که با گنجاندن این قابلیت‌ها به‌طور پیش‌فرض، اطمینان حاصل شود که برنامه‌ها تا حد امکان با عملکرد بالا شروع می‌شوند و باقی می‌مانند.
این مقدمه به‌طور خلاصه بسیاری از ویژگی‌های ارائه‌شده توسط چارچوب را در سطح بالا پوشش می‌دهد. راهنماهای دیگر در این مجموعه ویژگی‌ها را با جزئیات بیشتری کاوش خواهند کرد.
چه چیزی یاد خواهید گرفت؟
اگرچه Next.js به‌طور پیش‌فرض تعدادی بهینه‌سازی عملکرد ارائه می‌دهد، این راهنماها هدفشان توضیح دقیق‌تر آن‌ها و نشان دادن نحوه استفاده از آن‌ها برای ساختن تجربه‌ای سریع و کارآمد است.
بهینه‌سازی‌های زیادی وجود دارد که به‌طور کلی می‌توان به سایت‌های React اضافه کرد و برای برنامه‌های ساخته‌شده با Next.js نیز کار می‌کند. این موارد پوشش داده نخواهند شد زیرا تمرکز بر چیزی است که Next.js به‌طور خاص ارائه می‌دهد. برای کسب اطلاعات بیشتر درباره بهینه‌سازی‌های کلی React، مجموعه React ما را بررسی کنید.
Next.js چه تفاوتی با React دارد؟
React کتابخانه‌ای است که ساختن میانای کاربر را بااستفاده از رویکرد مبتنی بر مؤلفه آسان‌تر می‌کند. React با وجود قدرتمند بودن، به‌طور خاص یک کتابخانه میانای کاربر است. بسیاری‌از توسعه‌دهندگان ابزارهای اضافی مانند بسته‌بندی‌کننده ماژول (برای مثال webpack) و مترجم مبدأ به مبدأ (برای مثال Babel) را برای داشتن زنجیره ابزار ساخت کامل اضافه می‌کنند.
در مجموعه React، رویکرد استفاده از برنامه React (CRA) را برای راه‌اندازی سریع برنامه‌های React اتخاذ کردیم. CRA با ارائه یک زنجیره ابزار ساخت کامل با یک فرمان، دردسر راه‌اندازی برنامه React را ازبین می‌برد.
اگرچه چند بهینه‌سازی پیش‌فرض در CRA گنجانده شده است، هدف این ابزار ارائه راه‌اندازی ساده و سرراست است. این انتخاب به توسعه‌دهندگان داده می‌شود که تصمیم بگیرند آیا خارج شوند و پیکربندی‌ها را خودشان اصلاح کنند یا نه.
Next.js که می‌تواند برای ایجاد برنامه React جدید نیز استفاده شود، رویکرد متفاوتی دارد. این ابزار بلافاصله تعدادی بهینه‌سازی رایج را ارائه می‌دهد که بسیاری از توسعه‌دهندگان مایل به داشتن آن‌ها هستند اما راه‌اندازی آن‌ها را دشوار می‌دانند، مانند:
- پرداز زدن سمت سرور
- تقسیم خودکار کد
- پیش‌واکشی مسیر
- رهیابی سیستم فایل
- سبک‌بندی CSS-in-JS (
styled-jsx)
درحال راه‌اندازی
برای ایجاد برنامه Next.js جدید، فرمان زیر را اجرا کنید:
npx create-next-app new-app
سپس به فهرست راهنما بروید و سرور توسعه را راه‌اندازی کنید:
cd new-app
npm run dev
جاسازی زیر ساختار دایرکتوری برنامه Next.js جدید را نشان می‌دهد.
- روی بازآمیزی برای ویرایش کلیک کنید تا پروژه قابل‌ویرایش شود.
- برای پیش‌دید کردن سایت، مشاهده برنامه را فشار دهید. سپس
تمام‌صفحه
را فشار دهید.
توجه داشته باشید که فهرست راهنمای pages/ با یک فایل ایجاد شده است: index.jsx. Next.js از رویکرد مسیریابی سیستم فایل پیروی می‌کند که در آن هر صفحه در این دایرکتوری به‌عنوان یک مسیر جداگانه ارائه می‌شود. ایجاد فایل جدید در این دایرکتوری، مثل about.js، به‌طور خودکار مسیر جدیدی (/about) ایجاد خواهد کرد.
همچنین می‌توان مؤلفه‌ها را مانند هر برنامه React دیگری ایجاد و استفاده کرد. قبلاً دایرکتوری components/ با یک مؤلفه، nav.js، ایجاد شده است که قبلاً در index.js وارد شده است. به‌طور پیش‌فرض، هر وارداتی که در Next.js استفاده می‌شود فقط زمانی واکشی می‌شود که آن صفحه بار شود، که مزایای تقسیم خودکار کد را ارائه می‌دهد.
علاوه‌براین، هر بارگیری اولیه صفحه در Next.js پردازش‌شده در سمت سرور است. اگر پانل «شبکه» را در DevTools باز کنید، می‌توانید ببینید که درخواست اولیه برای سند، صفحه‌ای را برمی‌گرداند که کاملاً توسط سرور ارائه شده است.
این‌ها فقط چند مورد از ویژگی‌های متعددی است که Next.js به‌طور خودکار ارائه می‌دهد. بسیاری از سفارشی‌سازی‌شدنی هستند و می‌توان آن‌ها را برای موارد استفاده مختلف اصلاح کرد.
حالا چه می‌شود؟
جناس کلامی 😛
هر راهنمای دیگری در این مجموعه، ویژگی خاصی از Next.js را به‌طور دقیق بررسی خواهد کرد:
- واکشی اولیه مسیر برای افزایش سرعت پیمایش صفحه
- ارائه صفحه‌های ترکیبی و فقط AMP برای بار کردن سریع‌تر از موتورهای جستجو
- عناصر تقسیم کد با واردات پویا برای کاهش ردپای جاوا اسکریپت