هيكل مشروع 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 والتجهيز |
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
ملفات التوجيه
layout | .js .jsx .tsx | التخطيط (Layout) |
page | .js .jsx .tsx | الصفحة (Page) |
loading | .js .jsx .tsx | واجهة التحميل (Loading UI) |
not-found | .js .jsx .tsx | واجهة غير موجود (Not found) |
error | .js .jsx .tsx | واجهة الخطأ (Error UI) |
global-error | .js .jsx .tsx | واجهة الخطأ العام |
route | .js .ts | نقطة نهاية API |
template | .js .jsx .tsx | تخطيط معاد عرضه |
default | .js .jsx .tsx | صفحة احتياطية للمسار الموازي |
المسارات المتداخلة
folder | قطعة مسار |
folder/folder | قطعة مسار متداخلة |
المسارات الديناميكية
[folder] | قطعة مسار ديناميكية |
[...folder] | قطعة مسار شاملة |
[[...folder]] | قطعة مسار شاملة اختيارية |
مجموعات المسارات والمجلدات الخاصة
المسارات الموازية والمقاطعة
@folder | فتحة مسماة |
(.)folder | مقاطعة بنفس المستوى |
(..)folder | مقاطعة بمستوى أعلى |
(..)(..)folder | مقاطعة بمستويين أعلى |
(...)folder | مقاطعة من الجذر |
اتفاقيات ملفات البيانات الوصفية
أيقونات التطبيق
favicon | .ico | ملف الأيقونة المفضلة |
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 | .js .ts | خريطة الموقع المولدة |
robots | .txt | ملف robots |
robots | .js .ts | ملف robots المولد |
اتفاقيات التوجيه في pages
ملفات خاصة
_app | .js .jsx .tsx | تطبيق مخصص |
_document | .js .jsx .tsx | مستند مخصص |
_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 | قطعة مسار شاملة اختيارية |