مقدمة
مرحبًا بكم في وثائق Next.js!
ما هو Next.js؟
Next.js هو إطار عمل React لبناء تطبيقات ويب كاملة المكدس. تستخدم مكونات React لبناء واجهات المستخدم، بينما يوفر Next.js ميزات وتحسينات إضافية.
تحت الغطاء، يقوم Next.js أيضًا بتجريد وتكوين الأدوات المطلوبة لـ React تلقائيًا، مثل التجميع والتحويل وغير ذلك. وهذا يتيح لك التركيز على بناء تطبيقك بدلاً من قضاء الوقت في التهيئة.
سواء كنت مطورًا فرديًا أو جزءًا من فريق أكبر، يمكن لـ Next.js مساعدتك في بناء تطبيقات React تفاعلية وديناميكية وسريعة.
الميزات الرئيسية
بعض الميزات الرئيسية في Next.js تشمل:
| الميزة | الوصف |
|---|---|
| التوجيه (Routing) | نظام توجيه يعتمد على نظام الملفات مبني على مكونات الخادم (Server Components) يدعم التخطيطات، التوجيه المتداخل، حالات التحميل، معالجة الأخطاء، والمزيد. |
| التصيير (Rendering) | تصيير من جانب العميل (Client-side) ومن جانب الخادم (Server-side) مع مكونات العميل والخادم. مع تحسين إضافي عبر التصيير الثابت (Static) والديناميكي (Dynamic) على الخادم باستخدام Next.js. دفق البيانات على بيئات Edge و Node.js. |
| جلب البيانات (Data Fetching) | تبسيط جلب البيانات باستخدام async/await في مكونات الخادم، مع واجهة fetch موسعة لتخزين الطلبات، تخزين البيانات المؤقت وإعادة التحقق. |
| التنسيق (Styling) | دعم لطرق التنسيق المفضلة لديك، بما في ذلك وحدات CSS، Tailwind CSS، و CSS-in-JS |
| التحسينات (Optimizations) | تحسينات الصور، الخطوط، والنصوص البرمجية لتحسين مؤشرات Core Web Vitals وتجربة المستخدم لتطبيقك. |
| TypeScript | دعم محسن لـ TypeScript، مع فحص أنواع أفضل وتجميع أكثر كفاءة، بالإضافة إلى إضافات TypeScript المخصصة ومدقق الأنواع. |
كيفية استخدام هذه الوثائق
على الجانب الأيسر من الشاشة، ستجد شريط التنقل للوثائق. تم تنظيم صفحات الوثائق بشكل تسلسلي، من الأساسي إلى المتقدم، حتى تتمكن من متابعتها خطوة بخطوة أثناء بناء تطبيقك. ومع ذلك، يمكنك قراءتها بأي ترتيب أو الانتقال مباشرة إلى الصفحات التي تناسب حالتك الاستخدامية.
على الجانب الأيمن من الشاشة، ستجد جدول محتويات يسهل التنقل بين أقسام الصفحة. إذا كنت بحاجة إلى العثور على صفحة بسرعة، يمكنك استخدام شريط البحث في الأعلى، أو اختصار البحث (Ctrl+K أو Cmd+K).
للبدء، يمكنك الاطلاع على دليل التثبيت.
موجه التطبيق (App Router) مقابل موجه الصفحات (Pages Router)
يحتوي Next.js على نظامي توجيه مختلفين: موجه التطبيق (App Router) وموجه الصفحات (Pages Router). موجه التطبيق هو نظام توجيه أحدث يسمح لك باستخدام أحدث ميزات React، مثل مكونات الخادم (Server Components) والدفق (Streaming). بينما موجه الصفحات هو نظام التوجيه الأصلي لـ Next.js، والذي يسمح لك ببناء تطبيقات React مع تصيير من الخادم وما زال مدعومًا للتطبيقات القديمة.
في أعلى الشريط الجانبي، ستلاحظ قائمة منسدلة تتيح لك التبديل بين ميزات موجه التطبيق و موجه الصفحات. نظرًا لوجود ميزات فريدة لكل نظام توجيه، من المهم تتبع أي علامة تبويب محددة.
كما أن مسار التنقل (breadcrumbs) في أعلى الصفحة سيحدد ما إذا كنت تشاهد وثائق موجه التطبيق أو موجه الصفحات.
المعرفة المسبقة المطلوبة
على الرغم من أن وثائقنا مصممة لتكون سهلة للمبتدئين، إلا أننا نحتاج إلى تحديد مستوى أساسي حتى تظل الوثائق مركزة على وظائف Next.js. سنحرص على توفير روابط للوثائق ذات الصلة كلما قدمنا مفهومًا جديدًا.
للحصول على أقصى استفادة من وثائقنا، يُنصح بأن يكون لديك فهم أساسي لـ HTML و CSS و React. إذا كنت بحاجة إلى تحسين مهاراتك في React، يمكنك الاطلاع على دورة أساسيات React، والتي ستقدمك إلى الأساسيات. ثم تعلم المزيد عن Next.js من خلال بناء تطبيق لوحة تحكم.
إمكانية الوصول
لتحقيق أفضل إمكانية وصول عند استخدام قارئ شاشة أثناء قراءة الوثائق، نوصي باستخدام Firefox مع NVDA، أو Safari مع VoiceOver.
انضم إلى مجتمعنا
إذا كانت لديك أي أسئلة حول Next.js، فأنت دائمًا مرحب بك في طرحها على مجتمعنا عبر مناقشات GitHub، Discord، Twitter، و Reddit.