هيكل مشروع Next.js
توفر هذه الصفحة نظرة عامة على هيكل مشروع تطبيق Next.js. وهي تغطي الملفات والمجلدات الرئيسية، وملفات التكوين، واتفاقيات التوجيه داخل مجلدي app و pages.
انقر على أسماء الملفات والمجلدات لمعرفة المزيد عن كل اتفاقية.
المجلدات الرئيسية
تُستخدم المجلدات الرئيسية لتنظيم الكود والأصول الثابتة لتطبيقك.
app | موجه التطبيق (App Router) |
pages | موجه الصفحات (Pages Router) |
public | الأصول الثابتة التي سيتم تقديمها |
src | مجلد مصدر التطبيق الاختياري |
الملفات الرئيسية
تُستخدم الملفات الرئيسية لتكوين تطبيقك، وإدارة التبعيات، وتشغيل البرمجيات الوسيطة، ودمج أدوات المراقبة، وتحديد متغيرات البيئة.
| 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
تستخدم اتفاقيات الملفات التالية لتحديد المسارات وإدارة البيانات الوصفية في موجه app.
ملفات التوجيه
layout | .js .jsx .tsx | التخطيط (Layout) |
page | .js .jsx .tsx | الصفحة (Page) |
loading | .js .jsx .tsx | واجهة التحميل (Loading UI) |
not-found | .js .jsx .tsx | واجهة غير موجود (Not found UI) |
error | .js .jsx .tsx | واجهة الخطأ (Error UI) |
global-error | .js .jsx .tsx | واجهة الخطأ العامة (Global error UI) |
route | .js .ts | نقطة نهاية API |
template | .js .jsx .tsx | تخطيط معاد تقديمه |
default | .js .jsx .tsx | صفحة احتياطية للمسار الموازي |
المسارات المتداخلة
folder | مقطع المسار (Route segment) |
folder/folder | مقطع مسار متداخل (Nested route segment) |
المسارات الديناميكية
[folder] | مقطع مسار ديناميكي (Dynamic route segment) |
[...folder] | مقطع مسار شامل (Catch-all route segment) |
[[...folder]] | مقطع مسار شامل اختياري (Optional catch-all route segment) |
مجموعات المسارات والمجلدات الخاصة
(folder) | تجميع المسارات دون التأثير على التوجيه |
_folder | استبعاد المجلد وجميع المقاطع الفرعية من التوجيه |
المسارات المتوازية والمقاطعة
@folder | فتحة مسماة (Named slot) |
(.)folder | مقاطعة نفس المستوى |
(..)folder | مقاطعة مستوى واحد أعلى |
(..)(..)folder | مقاطعة مستويين أعلى |
(...)folder | مقاطعة من الجذر (Root) |
اتفاقيات ملفات البيانات الوصفية
أيقونات التطبيق
favicon | .ico | ملف الأيقونة المفضلة (Favicon) |
icon | .ico .jpg .jpeg .png .svg | ملف أيقونة التطبيق |
icon | .js .ts .tsx | أيقونة التطبيق المولدة |
apple-icon | .jpg .jpeg, .png | ملف أيقونة Apple |
apple-icon | .js .ts .tsx | أيقونة Apple المولدة |
صور Open Graph و Twitter
opengraph-image | .jpg .jpeg .png .gif | ملف صورة Open Graph |
opengraph-image | .js .ts .tsx | صورة Open Graph المولدة |
twitter-image | .jpg .jpeg .png .gif | ملف صورة Twitter |
twitter-image | .js .ts .tsx | صورة Twitter المولدة |
تحسين محركات البحث (SEO)
sitemap | .xml | ملف خريطة الموقع (Sitemap) |
sitemap | .js .ts | خريطة الموقع المولدة |
robots | .txt | ملف robots.txt |
robots | .js .ts | ملف robots.txt المولد |
اتفاقيات التوجيه في pages
تستخدم اتفاقيات الملفات التالية لتحديد المسارات في موجه pages.
ملفات خاصة
_app | .js .jsx .tsx | تطبيق مخصص (Custom App) |
_document | .js .jsx .tsx | مستند مخصص (Custom Document) |
_error | .js .jsx .tsx | صفحة خطأ مخصصة |
404 | .js .jsx .tsx | صفحة خطأ 404 |
500 | .js .jsx .tsx | صفحة خطأ 500 |
المسارات
| اتفاقية المجلد | ||
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 | مقطع مسار شامل |
[[...folder]]/index | .js .jsx .tsx | مقطع مسار شامل اختياري |
| اتفاقية الملف | ||
[file] | .js .jsx .tsx | مقطع مسار ديناميكي |
[...file] | .js .jsx .tsx | مقطع مسار شامل |
[[...file]] | .js .jsx .tsx | مقطع مسار شامل اختياري |