الصفحات والتوجيه

pages/
├── index.js          → /
├── about.js          → /about
├── contact.js        → /contact
└── blog.js           → /blog

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>من نحن</h1>
      <p>مرحبًا بكم في صفحة من نحن!</p>
    </div>
  )
}

pages/
├── blog/
│   ├── index.js      → /blog
│   ├── first-post.js → /blog/first-post
│   └── second-post.js → /blog/second-post
└── products/
    ├── index.js      → /products
    └── electronics.js → /products/electronics

// pages/blog/index.js
export default function Blog() {
  return <h1>الصفحة الرئيسية للمدونة</h1>
}

// pages/blog/first-post.js
export default function FirstPost() {
  return <h1>مقالتي الأولى</h1>
}

pages/
└── blog/
    ├── index.js
    └── [slug].js     → /blog/:slug (يطابق /blog/hello، /blog/world، إلخ.)

// pages/blog/[slug].js
import { useRouter } from 'next/router'

export default function BlogPost() {
  const router = useRouter()
  const { slug } = router.query

  return (
    <div>
      <h1>مقالة المدونة: {slug}</h1>
      <p>أنت تشاهد مقالة المدونة بالمعرف: {slug}</p>
    </div>
  )
}

pages/
└── posts/
    └── [category]/
        └── [id].js   → /posts/:category/:id

// pages/posts/[category]/[id].js
import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { category, id } = router.query

  return (
    <div>
      <h1>الفئة: {category}</h1>
      <p>معرف المقالة: {id}</p>
    </div>
  )
}

pages/
└── docs/
    └── [...slug].js  → /docs/* (يطابق /docs/a، /docs/a/b، /docs/a/b/c، إلخ.)

// pages/docs/[...slug].js
import { useRouter } from 'next/router'

export default function Docs() {
  const router = useRouter()
  const { slug } = router.query

  // slug هو مصفوفة من أجزاء المسار
  // /docs/getting-started → ['getting-started']
  // /docs/api/users/create → ['api', 'users', 'create']

  return (
    <div>
      <h1>التوثيق</h1>
      <p>أجزاء المسار: {slug?.join(' / ')}</p>
    </div>
  )
}

pages/
└── docs/
    └── [[...slug]].js  → /docs، /docs/a، /docs/a/b، إلخ.

app/
├── page.js           → /
├── about/
│   └── page.js       → /about
├── blog/
│   ├── page.js       → /blog
│   └── [slug]/
│       └── page.js   → /blog/:slug
└── products/
    └── [id]/
        └── page.js   → /products/:id

// app/about/page.js
export default function AboutPage() {
  return (
    <div>
      <h1>من نحن</h1>
      <p>هذه صفحة من نحن باستخدام App Router</p>
    </div>
  )
}

app/
└── blog/
    ├── page.js       → /blog
    └── [slug]/
        └── page.js   → /blog/:slug

// app/blog/[slug]/page.js
export default function BlogPost({ params }) {
  // في App Router، يتم تمرير params كخصائص
  return (
    <div>
      <h1>مقالة المدونة: {params.slug}</h1>
      <p>قراءة المقالة بالمعرف: {params.slug}</p>
    </div>
  )
}

app/
└── docs/
    ├── page.js               → /docs
    └── [...slug]/
        └── page.js           → /docs/* (أجزاء متعددة)

// app/docs/[...slug]/page.js
export default function DocsPage({ params }) {
  const pathSegments = params.slug.join(' → ')

  return (
    <div>
      <h1>التوثيق</h1>
      <p>المسار الحالي: {pathSegments}</p>
    </div>
  )
}

import Link from 'next/link'

export default function Navigation() {
  return (
    <nav>
      <Link href="/">الرئيسية</Link>
      <Link href="/about">من نحن</Link>
      <Link href="/blog">المدونة</Link>
      <Link href="/contact">اتصل بنا</Link>
    </nav>
  )
}

import Link from 'next/link'

export default function BlogList({ posts }) {
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}

// Pages Router
import { useRouter } from 'next/router'

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

  const handleSubmit = async (e) => {
    e.preventDefault()
    // معالجة تسجيل الدخول...
    await router.push('/dashboard')
  }

  return <form onSubmit={handleSubmit}>...</form>
}

// App Router
'use client' // يجب أن يكون مكون عميل

import { useRouter } from 'next/navigation'

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

  const handleSubmit = async (e) => {
    e.preventDefault()
    // معالجة تسجيل الدخول...
    router.push('/dashboard')
  }

  return <form onSubmit={handleSubmit}>...</form>
}

pages/
├── blog/
│   ├── index.js      → يطابق /blog (أعلى أولوية)
│   ├── create.js     → يطابق /blog/create (الأولوية الثانية)
│   ├── [slug].js     → يطابق /blog/anything-else (الأولوية الثالثة)
│   └── [...slug].js  → لن يتم الوصول إليه بسبب [slug].js

// Pages Router - pages/search.js
import { useRouter } from 'next/router'

export default function Search() {
  const router = useRouter()
  const { q, category } = router.query

  // URL: /search?q=nextjs&category=tutorial
  // q = "nextjs"
  // category = "tutorial"

  return (
    <div>
      <h1>نتائج البحث</h1>
      <p>الاستعلام: {q}</p>
      <p>الفئة: {category}</p>
    </div>
  )
}

// App Router - app/search/page.js
export default function SearchPage({ searchParams }) {
  // يتم تمرير searchParams كخصائص في App Router
  const { q, category } = searchParams

  return (
    <div>
      <h1>نتائج البحث</h1>
      <p>الاستعلام: {q}</p>
      <p>الفئة: {category}</p>
    </div>
  )
}

// pages/404.js (Pages Router)
export default function Custom404() {
  return (
    <div>
      <h1>404 - الصفحة غير موجودة</h1>
      <p>الصفحة التي تبحث عنها غير موجودة.</p>
    </div>
  )
}

// app/not-found.js (App Router)
export default function NotFound() {
  return (
    <div>
      <h1>404 - الصفحة غير موجودة</h1>
      <p>الصفحة التي تبحث عنها غير موجودة.</p>
    </div>
  )
}