جاري التحميل...
جاري التحميل...
File-based routing، layouts، dynamic routes، route groups، Link
في Next.js، التوجيه تلقائي بناءً على هيكل الملفات والمجلدات. كل مجلد داخل app/ يمثل مقطعاً في الرابط.
app/page.js → / (الصفحة الرئيسية)app/about/page.js → /aboutapp/blog/page.js → /blogpage.js يحدد واجهة المستخدم لكل مسار. كل مجلد يحتوي على page.js يصبح مساراً قابل للزيارة.
يجب أن يكون اسم الملف بالضبط page.js (أو page.tsx مع TypeScript).
layout.js يحدد تخطيطاً مشتركاً بين عدة صفحات. يلف الصفحات الفرعية ويبقى ثابتاً أثناء التنقل بينها.
عندما لا تعرف اسم المسار مسبقاً، استخدم المسارات الديناميكية مع الأقواس المربعة [slug].
في Next.js 16، params هو Promise ويجب استخدام await للوصول إلى قيمته.
استخدم الأقواس () لتنظيم الملفات دون التأثير على مسار الرابط.
<Link> هو مكون التنقل في Next.js. يوفر التحميل المسبق، والتنقل من جانب العميل، والتعامل التلقائي مع التمرير.
كيف تحدد المسار /about في App Router؟
ما هو الفرق الرئيسي بين layout.js و page.js؟
كيف تنشئ مساراً ديناميكياً لمنشور المدونة؟
أنشئ هيكل ملفات مع تخطيط رئيسي، وصفحة رئيسية، وصفحة حول، ومدونة مع منشورات ديناميكية، وقسم لوحة تحكم.
الحل:
// app/layout.js - التخطيط الرئيسي
import Link from "next/link";
export default function RootLayout({ children }) {
return (
<html lang="ar" dir="rtl">
<body>
<header>
<nav style={{ display: "flex", gap: "1rem" }}>
<Link href="/">الرئيسية</Link>
<Link href="/about">من نحن</Link>
<Link href="/blog">المدونة</Link>
<Link href="/dashboard">لوحة التحكم</Link>
</nav>
</header>
<main>{children}</main>
<footer>© 2026 CodeMaster</footer>
</body>
</html>
);
}
// app/blog/[slug]/page.js - مقال ديناميكي
const posts = [
{ slug: "hello-world", title: "مرحباً بالعالم" },
{ slug: "nextjs-guide", title: "دليل Next.js" },
];
export async function generateStaticParams() {
return posts.map((post) => ({ slug: post.slug }));
}
export default async function BlogPost({ params }) {
const { slug } = await params;
const post = posts.find((p) => p.slug === slug);
if (!post) return <h1>المقال غير موجود</h1>;
return <h1>{post.title}</h1>;
}هيكل المسار:
page.js - صفحة المسارlayout.js - التخطيط المشترك[slug]/page.js - مسار ديناميكي(group)/page.js - مجموعة مسارات@slot/page.js - مسار متوازيالتنقل:
{""} - رابط التنقلrouter.push() - تنقل برمجيrouter.replace() - استبدالrouter.back() - رجوعمفاهيم متقدمة:
generateStaticParams - إنشاء مسارات ثابتةparams - كائن يحتوي على slug(.) (..) - مسارات اعتراضيةقواعد مهمة:
كيف يعمل routing في Next.js 13+؟
الإجابة:
بناءً على الملفات في مجلد app/. كل مجلد route.
ما هو layout؟
الإجابة:
مكون يلف عدة صفحات ويحتفظ بالحالة عند التنقل بينها.
استخدم loading.js
أنشئ ملف loading.js في أي مجلد لعرض loading spinner تلقائياً