تعريف المسارات (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>
}