معرفی
به مستندات فارسی Next.js خوش آمدید.
نسخه فعلی
مترجم : مهدی مشایخی mashayekhimail@gmail.com
تاریخ بروزرسانی این مستندات : 1403/02/23
نسخه جاری مستندات : v14.2.3
به روز شده تا کامیت :
292fd4eb3f7a774c17990e3349b91ae5630db821 (5/12/2024)
Next.js چیست؟
Next.js یک فریمورک بر پایه React است که برای ساختن وباپلیکیشنهای فولاستک (کامل) به کار میرود. شما با استفاده از کامپوننتهای React رابط کاربری (UI) خود را میسازید و Next.js قابلیتها و بهینهسازیهای بیشتری در اختیار شما قرار میدهد.
در باطن، Next.js ابزارهای مورد نیاز برای React، مانند بستهبندی (bundling)، کامپایل (compiling) و موارد دیگر را به صورت خودکار پیکربندی و مدیریت میکند. این به شما امکان میدهد تا به جای صرف زمان برای پیکربندی، روی ساختن هسته اصلی برنامه خود تمرکز کنید.
Next.js فرقی نمیکند یک توسعهدهنده فردی باشید یا عضو یک تیم بزرگ، میتواند به شما در ساخت اپلیکیشنهای React تعاملی، داینامیک و پرسرعت کمک کند.
ویژگی های اصلی
برخی از ویژگیهای اصلی Next.js شامل موارد زیر میشود :
| ویژگی | توضیحات |
|---|---|
| Routing مسیریابی | مسیریاب (Router) مبتنی بر سیستم فایل که روی کامپوننتهای سمت سرور (Server Components) ساخته شده است، از طرح بندی ها (layouts)، مسیریابی تو در تو (nested routing)، حالات بارگذاری (loading states)، هندل کردن خطا (error handling) و موارد دیگر پشتیبانی میکند. |
| Rendering رندرینگ | رندر سمت کلاینت (Client-side Rendering) و رندر سمت سرور (Server-side Rendering) با کامپوننتهای سمت کلاینت و سمت سرور. بهینهسازی بیشتر با رندر ایستا (Static Rendering) و رندر داینامیک (Dynamic Rendering) روی سرور. امکان استریم (streaming) روی لبه شبکه (Edge) و Node.js |
| Data Fetching دریافت داده | دریافت داده به صورت ساده با استفاده از async/await در کامپوننتهای سمت سرور و یک API fetch توسعهیافته برای به خاطر سپردن درخواست (request memoization)، کش کردن داده (data caching) و اعتبارسنجی مجدد (revalidation). |
| Styling استایل دهی | پشتیبانی از روشهای استایلدهی مورد علاقه شما، از جمله CSS Modules، Tailwind CSS و CSS-in-JS |
| Optimizations بهینه سازی ها | بهینهسازی تصاویر، فونتها و اسکریپتها برای بهبود Core Web Vitals و تجربه کاربری (User Experience) برنامه شما. |
| TypeScript تایپ اسکریپت | پشتیبانی بهبود یافته برای TypeScript، با چک کردن نوع بهتر و کامپایل بهینهتر، همچنین پلاگین سفارشی TypeScript و چکر نوع. |
چگونگی استفاده از این مستندات
در سمت راست صفحه، نوار پیمایش مستندات را پیدا خواهید کرد. صفحات مستندات به ترتیب از پایه تا پیشرفته سازماندهی شدهاند، بنابراین میتوانید هنگام ساخت برنامه خود آنها را گام به گام دنبال کنید. با این حال، میتوانید آنها را به هر ترتیبی بخوانید یا به صفحاتی بروید که با مورد استفاده شما مطابقت دارند.
در سمت چپ صفحه، فهرست عناوین را خواهید دید که پیمایش بین بخشهای یک صفحه را آسانتر میکند. اگر نیاز به یافتن سریع یک صفحه دارید، میتوانید از نوار جستجو در بالا یا میانبر جستجو (Ctrl+K یا Cmd+K) استفاده کنید.
برای شروع، راهنمای نصب را بررسی کنید.
مسیریاب برنامه در مقابل مسیریاب صفحات
مسیریاب برنامه (App Router) نسخه 13+
مسیریاب جدیدتری است که به شما امکان میدهد از آخرین ویژگیهای React، مانند کامپوننتهای سمت سرور (Server Components) و استریمینگ (Streaming) استفاده کنید. این رویکرد مدرنتری برای ساختن برنامههای Next.js ارائه میدهد. برای استفاده از این قابلیتها، باید پروژه Next.js خود را به نسخه سازگار با App Router ارتقا دهید.
مسیریاب صفحات (Pages Router) قدیمی
مسیریاب صفحات به شما امکان ساخت برنامههای React با رندر سمت سرور Server-rendered را میدهد. همچنان برای برنامههای Next.js قدیمیتر پشتیبانی میشود. اگر قبلاً یک برنامه Next.js دارید، به احتمال زیاد از Pages Router استفاده میکند. (نسخه های قبل 13)
نحوه انتخاب مسیریاب مناسب
انتخاب بین App Router و Pages Router به نیازهای پروژه شما بستگی دارد:
برای پروژههای جدید : اگر یک پروژه جدید Next.js راهاندازی میکنید، استفاده از App Router توصیه میشود، زیرا از آخرین ویژگیهای React بهره میبرد.
برای پروژههای موجود : اگر در حال حاضر یک برنامه Next.js با Pages Router دارید، میتوانید به ارتقا به App Router در صورت نیاز و آمادگی برای انجام مهاجرت، فکر کنید.
نکته: در این مستندات ما فقط بخش های مربوط به مسیریاب برنامه (App Router) روآموزش میدیم، چرا که هدف ما آموزش Next.js نسخه +13 به بعد هست.
دانش پیش نیاز
اگرچه تلاش میکنیم تا مستندات ما برای افراد مبتدی هم قابل فهم باشه، اما لازمه که یه سطح ابتدایی رو در نظر بگیریم تا بتونیم روی قابلیتهای Next.js تمرکز کنیم. هر وقت مفهوم جدیدی معرفی میکنیم، مطمئن میشیم که لینکهای مرتبط به مستندات رو هم در اختیارتون قرار بدیم.
To get the most out of our docs, it's recommended that you have a basic understanding of HTML, CSS, and React. If you need to brush up on your React skills, check out our React Foundations Course, which will introduce you to the fundamentals. Then, learn more about Next.js by building a dashboard application.
دسترسی پذیری
برای دسترسی بهینه به اسناد هنگام استفاده از یک خواننده صفحه نمایش، توصیه میکنیم از مرورگر Firefox و NVDA یا Safari و VoiceOver استفاده کنید.
به انجمن ما بپیوندید
اگر سوالی در مورد هر چیزی مرتبط با Next.js دارید، همیشه می توانید از جامعه ما در GitHub Discussions (opens in a new tab)، Discord (opens in a new tab)، Twitter (opens in a new tab) و Reddit (opens in a new tab) سوال کنید.اگر سوالی در مورد هر چیزی مرتبط با Next.js دارید، همیشه می توانید از جامعه ما در GitHub Discussions، Discord، Twitter و Reddit سوال کنید.