هيكل وتنظيم المشروع

توفر هذه الصفحة نظرة عامة على جميع اصطلاحات المجلدات والملفات في Next.js، وتوصيات لتنظيم مشروعك.

اصطلاحات المجلدات والملفات

مجلدات المستوى الأعلى

تُستخدم مجلدات المستوى الأعلى لتنظيم كود التطبيق والأصول الثابتة.

Route segments to path segments
appموجه التطبيق (App Router)
pagesموجه الصفحات (Pages Router)
publicالأصول الثابتة التي سيتم تقديمها
srcمجلد مصدر التطبيق الاختياري

ملفات المستوى الأعلى

تُستخدم ملفات المستوى الأعلى لتكوين التطبيق، وإدارة التبعيات، وتشغيل الوسيط (middleware)، ودمج أدوات المراقبة، وتحديد متغيرات البيئة.

Next.js
next.config.jsملف تكوين Next.js
package.jsonتبعيات المشروع والنصوص البرمجية
instrumentation.tsملف OpenTelemetry والأدوات (Instrumentation)
middleware.tsوسيط طلبات Next.js
.envمتغيرات البيئة
.env.localمتغيرات البيئة المحلية
.env.productionمتغيرات بيئة الإنتاج
.env.developmentمتغيرات بيئة التطوير
.eslintrc.jsonملف تكوين ESLint
.gitignoreملفات ومجلدات Git لتجاهلها
next-env.d.tsملف تعريف TypeScript لـ Next.js
tsconfig.jsonملف تكوين TypeScript
jsconfig.jsonملف تكوين JavaScript

اصطلاحات الملفات

_app.js .jsx .tsxتطبيق مخصص
_document.js .jsx .tsxمستند مخصص
_error.js .jsx .tsxصفحة خطأ مخصصة
404.js .jsx .tsxصفحة خطأ 404
500.js .jsx .tsxصفحة خطأ 500

الطرق (Routes)

اصطلاح المجلد
index.js .jsx .tsxالصفحة الرئيسية
folder/index.js .jsx .tsxصفحة متداخلة
اصطلاح الملف
index.js .jsx .tsxالصفحة الرئيسية
file.js .jsx .tsxصفحة متداخلة

الطرق الديناميكية

اصطلاح المجلد
[folder]/index.js .jsx .tsxمقطع طريق ديناميكي
[...folder]/index.js .jsx .tsxمقطع طريق شامل (Catch-all)
[[...folder]]/index.js .jsx .tsxمقطع طريق شامل اختياري
اصطلاح الملف
[file].js .jsx .tsxمقطع طريق ديناميكي
[...file].js .jsx .tsxمقطع طريق شامل (Catch-all)
[[...file]].js .jsx .tsxمقطع طريق شامل اختياري