تنظيم المشروع ووضع الملفات معًا

بخلاف اتفاقيات مجلدات وملفات التوجيه، فإن Next.js غير متحيز بشأن كيفية تنظيم ووضع ملفات مشروعك معًا.

تشارك هذه الصفحة السلوك الافتراضي والميزات التي يمكنك استخدامها لتنظيم مشروعك.

• وضع الملفات معًا بشكل آمن افتراضيًا
• ميزات تنظيم المشروع
• استراتيجيات تنظيم المشروع

وضع الملفات معًا بشكل آمن افتراضيًا

في دليل app، تحدد التسلسل الهرمي للمجلدات المتداخلة بنية المسار.

يمثل كل مجلد جزءًا من المسار يتم تعيينه إلى جزء مقابل في مسار URL.

ومع ذلك، على الرغم من أن بنية المسار تُحدد من خلال المجلدات، إلا أن المسار غير متاح للجمهور حتى يتم إضافة ملف page.js أو route.js إلى جزء المسار.

وحتى عندما يصبح المسار متاحًا للجمهور، يتم إرسال المحتوى الذي يتم إرجاعه فقط بواسطة page.js أو route.js إلى العميل.

هذا يعني أنه يمكن وضع ملفات المشروع معًا بشكل آمن داخل أجزاء المسار في دليل app دون أن تصبح قابلة للتوجيه بالخطأ.

جيد أن تعرف:

• هذا يختلف عن دليل pages، حيث يعتبر أي ملف في pages مسارًا.
• بينما يمكنك وضع ملفات مشروعك معًا في app، ليس عليك فعل ذلك. إذا كنت تفضل، يمكنك إبقاؤها خارج دليل app.

ميزات تنظيم المشروع

يوفر Next.js عدة ميزات لمساعدتك في تنظيم مشروعك.

المجلدات الخاصة

يمكن إنشاء مجلدات خاصة عن طريق إضافة شرطة سفلية كبادئة لاسم المجلد: _folderName

يشير هذا إلى أن المجلد هو تفاصيل تنفيذ خاصة ولا يجب اعتباره من قبل نظام التوجيه، مما يؤدي إلى استثناء المجلد وجميع مجلداته الفرعية من التوجيه.

نظرًا لأنه يمكن وضع الملفات معًا بشكل آمن افتراضيًا في دليل app، فإن المجلدات الخاصة ليست مطلوبة لوضع الملفات معًا. ومع ذلك، يمكن أن تكون مفيدة لـ:

• فصل منطق واجهة المستخدم عن منطق التوجيه.
• تنظيم الملفات الداخلية بشكل متسق عبر المشروع وبيئة Next.js.
• فرز وتجميع الملفات في محررات الأكواد.
• تجنب التعارضات المحتملة في التسمية مع اتفاقيات ملفات Next.js المستقبلية.

جيد أن تعرف

• على الرغم من أنها ليست اتفاقية إطار عمل، يمكنك أيضًا التفكير في وضع علامة على الملفات خارج المجلدات الخاصة كـ "خاصة" باستخدام نفس نمط الشرطة السفلية.
• يمكنك إنشاء أجزاء URL تبدأ بشرطة سفلية عن طريق إضافة %5F (الشكل المشفر لـ URL للشرطة السفلية) كبادئة لاسم المجلد: %5FfolderName.
• إذا لم تستخدم المجلدات الخاصة، سيكون من المفهم معرفة اتفاقيات الملفات الخاصة في Next.js لتجنب التعارضات غير المتوقعة في التسمية.

مجموعات المسارات

يمكن إنشاء مجموعات المسارات عن طريق وضع مجلد بين قوسين: (folderName)

يشير هذا إلى أن المجلد هو لأغراض تنظيمية ولا يجب إدراجه في مسار URL للمسار.

تكون مجموعات المسارات مفيدة لـ:

• تنظيم المسارات في مجموعات مثل القسم في الموقع، الغرض، أو الفريق.
• تمكين التخطيطات المتداخلة في نفس مستوى جزء المسار:
  • إنشاء تخطيطات متداخلة متعددة في نفس الجزء، بما في ذلك تخطيطات الجذر المتعددة
  • إضافة تخطيط إلى مجموعة فرعية من المسارات في جزء مشترك

دليل src

يدعم Next.js تخزين كود التطبيق (بما في ذلك app) داخل دليل src اختياري. هذا يفصل كود التطبيق عن ملفات تكوين المشروع التي تعيش في الغالب في جذر المشروع.

أسماء مسارات الوحدات

يدعم Next.js أسماء مسارات الوحدات التي تجعل قراءة وصيانة الاستيرادات عبر ملفات المشروع المتداخلة بعمق أسهل.

// قبل
import { Button } from '../../../components/button'

// بعد
import { Button } from '@/components/button'

استراتيجيات تنظيم المشروع

لا توجد طريقة "صحيحة" أو "خاطئة" عندما يتعلق الأمر بتنظيم ملفاتك ومجلداتك في مشروع Next.js.

يقدم القسم التالي نظرة عامة عالية المستوى على الاستراتيجيات الشائعة. الخلاصة الأبسط هي اختيار استراتيجية تناسبك وفريقك والالتزام بها عبر المشروع.

جيد أن تعرف: في الأمثلة أدناه، نستخدم مجلدات components و lib كعناصر نائبة عامة، ولا يوجد أهمية خاصة لأسمائها في الإطار، وقد تستخدم مشاريعك مجلدات أخرى مثل ui، utils، hooks، styles، إلخ.

تخزين ملفات المشروع خارج app

تخزن هذه الاستراتيجية جميع أكواد التطبيق في مجلدات مشتركة في جذر مشروعك وتحافظ على دليل app لأغراض التوجيه فقط.

تخزين ملفات المشروع في مجلدات المستوى الأعلى داخل app

تخزن هذه الاستراتيجية جميع أكواد التطبيق في مجلدات مشتركة في جذر دليل app.

تقسيم ملفات المشروع حسب الميزة أو المسار

تخزن هذه الاستراتيجية أكواد التطبيق المشتركة عالميًا في جذر دليل app وتقسم أكواد التطبيق الأكثر تحديدًا إلى أجزاء المسار التي تستخدمها.