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

بخلاف اتفاقيات مجلدات وملفات التوجيه، فإن 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 وتقسم أكواد التطبيق الأكثر تحديدًا إلى أجزاء المسار التي تستخدمها.