نظام التوجيه في Next.js

يُعدّ نظام التوجيه في Next.js من أقوى ميزاته. فهو يعتمد على نظام الملفات، مما يجعل إنشاء المسارات بديهيًا وبسيطًا.

التوجيه المبني على الملفات

البنية الأساسية

في Next.js، يتحول كل ملف داخل المجلد pages/ تلقائيًا إلى مسار:

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

مثال على صفحة بسيطة

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>À propos de nous</h1>
      <p>Bienvenue sur notre page à propos.</p>
    </div>
  )
}

المسارات الديناميكية

مسارات ذات معاملات

استخدم الأقواس المربعة [] لإنشاء مسارات ديناميكية:

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

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

  return (
    <div>
      <h1>Article : {slug}</h1>
      <p>Contenu de l'article...</p>
    </div>
  )
}

مسارات ذات عدة معاملات

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

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

  return (
    <div>
      <h1>Article de {month}/{year}</h1>
      <h2>{slug}</h2>
    </div>
  )
}