التوجيه بالملفات
في Next.js، بنية المجلدات هي المسارات. كل مجلد فيه page.tsx يصبح صفحة.
app/
page.tsx → /
about/page.tsx → /about
blog/page.tsx → /blog
صفحة بسيطة
// app/about/page.tsx
export default function About() {
return <h1>من نحن</h1>;
}
المسارات الديناميكية
استخدم الأقواس المربّعة للمعاملات:
app/blog/[slug]/page.tsx → /blog/أي-عنوان
export default async function Post({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
return <h1>المقال: {slug}</h1>;
}
القوالب المتشاركة (Layouts)
ملف layout.tsx يلفّ كل الصفحات داخل مجلده:
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ar" dir="rtl">
<body>{children}</body>
</html>
);
}
التنقّل بين الصفحات
نستخدم مكوّن Link للتنقّل السريع بلا إعادة تحميل:
import Link from "next/link";
<Link href="/about">من نحن</Link>;
🎯 التالي: مكوّنات الخادم والعميل.