الأربعاء، 25 مارس 2026

🛣️ Next.js App Router

📖 سلسلة تعلم React و Next.js | المقال 6

🛤️ Next.js App Router - التوجيه

Next.js يجعل التوجيه سهلاً - كل ملف = صفحة!

📁 نظام الملفات = التوجيه

القاعدة: كل مجلد في src/app/ = مسار URL

مثال:

src/app/
├── page.tsx           →  /
├── about/
│   └── page.tsx       →  /about
├── blog/
│   ├── page.tsx       →  /blog
│   └── [id]/
│       └── page.tsx   →  /blog/:id
└── contact/
    └── page.tsx       →  /contact

📄 إنشاء صفحة جديدة

صفحة About:

// src/app/about/page.tsx

export default function AboutPage() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-4">من نحن</h1>
      <p>هذه صفحة About...</p>
    </div>
  );
}

// ✅ الآن: http://localhost:3000/about

🔗 Dynamic Routes - مسارات ديناميكية

صفحة مقال بـ ID:

// src/app/blog/[id]/page.tsx

interface Props {
  params: { id: string };
}

export default function BlogPost({ params }: Props) {
  return (
    <div className="p-8">
      <h1>المقال رقم: {params.id}</h1>
    </div>
  );
}

// ✅ /blog/1  → params.id = "1"
// ✅ /blog/abc → params.id = "abc"

🎨 Layout - القالب المشترك

// src/app/layout.tsx

import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <Navbar />
        
        <main>
          {children}
        </main>
        
        <Footer />
      </body>
    </html>
  );
}

🔗 Navigation - التنقل

استخدام Link:

import Link from 'next/link';

export default function Navbar() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog/1">Blog</Link>
    </nav>
  );
}

// ✅ Link = تنقل سريع بدون إعادة تحميل الصفحة

برمجياً:

'use client';

import { useRouter } from 'next/navigation';

export default function LoginForm() {
  const router = useRouter();

  const handleLogin = async () => {
    // ... تسجيل الدخول
    
    // انتقل للصفحة الرئيسية
    router.push('/dashboard');
  };

  return <button onClick={handleLogin}>دخول</button>;
}

⚙️ Loading & Error

صفحة التحميل:

// src/app/dashboard/loading.tsx

export default function Loading() {
  return (
    <div className="flex justify-center p-8">
      <div className="text-xl">جاري التحميل... ⏳</div>
    </div>
  );
}

صفحة الخطأ:

// src/app/dashboard/error.tsx

'use client';

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div className="p-8 text-center">
      <h2>❌ حدث خطأ!</h2>
      <button onClick={reset}>حاول مرة أخرى</button>
    </div>
  );
}

📊 ملخص

الملف الوظيفة
page.tsxصفحة
layout.tsxقالب مشترك
loading.tsxتحميل
error.tsxخطأ
[id]/page.tsxمسار ديناميكي

📌 تسميات: Next.js App Router تعلم برمجة

✨ ← المقال السابق | المقال التالي: API Routes → ✨

سلسلة تعلم React و Next.js مع Ahmed Issa

مرسلة بواسطة في
التسميات: , ,

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)