تعريف المسارات (Routes)

نوصي بقراءة صفحة أساسيات التوجيه (Routing Fundamentals) قبل المتابعة.

سيوجهك هذه الصفحة حول كيفية تعريف وتنظيم المسارات (routes) في تطبيق Next.js الخاص بك.

إنشاء المسارات

يستخدم Next.js موجهًا يعتمد على نظام الملفات حيث تُستخدم المجلدات لتعريف المسارات.

يمثل كل مجلد قطعة مسار (route segment) تُرسم إلى قطعة URL. لإنشاء مسار متداخل (nested route)، يمكنك تداخل المجلدات داخل بعضها البعض.

يتم استخدام ملف خاص page.js لجعل قطع المسار قابلة للوصول بشكل عام.

في هذا المثال، مسار URL /dashboard/analytics ليس متاحًا للعامة لأنه لا يحتوي على ملف page.js مقابِل. يمكن استخدام هذا المجلد لتخزين المكونات (components)، أو ملفات الأنماط (stylesheets)، أو الصور، أو أي ملفات أخرى مجمعة معًا.

معلومة مفيدة: يمكن استخدام امتدادات الملفات .js أو .jsx أو .tsx للملفات الخاصة.

إنشاء واجهة المستخدم

تُستخدم اصطلاحات الملفات الخاصة لإنشاء واجهة المستخدم لكل قطعة مسار. الأكثر شيوعًا هي الصفحات (pages) لعرض واجهة المستخدم الفريدة للمسار، والتخطيطات (layouts) لعرض واجهة المستخدم المشتركة بين عدة مسارات.

على سبيل المثال، لإنشاء صفحتك الأولى، أضف ملف page.js داخل مجلد app وقم بتصدير مكون React:

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}