موجه تطبيقات Next.js: دليل شامل للتوجيه القائم على الملفات

أحدث موجه تطبيقات Next.js، الذي تم تقديمه في Next.js 13 وأصبح المعيار في الإصدارات اللاحقة، ثورة في كيفية هيكلة التطبيقات والتنقل فيها. يقدم نظام توجيه قوي وبديهي قائم على الملفات يبسط التطوير ويحسن الأداء ويعزز تجربة المطور الشاملة. سيتعمق هذا الدليل الشامل في التوجيه القائم على الملفات في موجه التطبيقات، مما يوفر لك المعرفة والمهارات اللازمة لبناء تطبيقات Next.js قوية وقابلة للتطوير.

ما هو التوجيه القائم على الملفات؟

التوجيه القائم على الملفات هو نظام توجيه حيث يتم تحديد بنية مسارات تطبيقك مباشرة من خلال تنظيم ملفاتك ومجلداتك. في موجه تطبيقات Next.js، تقوم بتعريف المسارات عن طريق إنشاء ملفات داخل مجلد `app`. يمثل كل مجلد جزءًا من المسار، وتحدد الملفات الخاصة داخل تلك المجلدات كيفية التعامل مع هذا الجزء من المسار. يقدم هذا النهج العديد من المزايا:

• هيكل بديهي: يعكس نظام الملفات بنية مسارات التطبيق، مما يسهل فهمه والتنقل فيه.
• توجيه تلقائي: يقوم Next.js بإنشاء المسارات تلقائيًا بناءً على بنية ملفاتك، مما يلغي الحاجة إلى التكوين اليدوي.
• تجميع الكود: تتواجد معالجات المسارات ومكونات واجهة المستخدم معًا، مما يحسن تنظيم الكود وقابلية الصيانة.
• ميزات مدمجة: يوفر موجه التطبيقات دعمًا مدمجًا للتخطيطات والمسارات الديناميكية وجلب البيانات والمزيد، مما يبسط سيناريوهات التوجيه المعقدة.

البدء مع موجه التطبيقات

لاستخدام موجه التطبيقات، تحتاج إلى إنشاء مشروع Next.js جديد أو ترحيل مشروع موجود. تأكد من أنك تستخدم الإصدار 13 من Next.js أو أحدث.

إنشاء مشروع جديد:

يمكنك إنشاء مشروع Next.js جديد باستخدام موجه التطبيقات عبر الأمر التالي:

npx create-next-app@latest my-app --example with-app

ترحيل مشروع موجود:

لترحيل مشروع موجود، تحتاج إلى نقل صفحاتك من مجلد `pages` إلى مجلد `app`. قد تحتاج إلى تعديل منطق التوجيه الخاص بك وفقًا لذلك. يوفر Next.js دليل ترحيل لمساعدتك في هذه العملية.

المفاهيم الأساسية للتوجيه القائم على الملفات

يقدم موجه التطبيقات العديد من الملفات والاتفاقيات الخاصة التي تحدد كيفية التعامل مع مساراتك:

1. مجلد `app`

مجلد `app` هو جذر مسارات تطبيقك. سيتم استخدام جميع الملفات والمجلدات داخل هذا المجلد لإنشاء المسارات. سيتم تجاهل أي شيء خارج مجلد `app` (مثل مجلد `pages` إذا كنت تقوم بالترحيل) بواسطة موجه التطبيقات.

2. ملف `page.js`

ملف `page.js` (أو `page.jsx`، `page.ts`، `page.tsx`) هو الجزء الأساسي في موجه التطبيقات. يحدد مكون واجهة المستخدم الذي سيتم عرضه لجزء مسار معين. إنه ملف **مطلوب** لأي جزء من المسار تريد أن يكون متاحًا بشكل مباشر.

مثال:

إذا كان لديك بنية ملفات مثل هذه:

app/
  about/
    page.js

سيتم عرض المكون المصدر من `app/about/page.js` عندما ينتقل المستخدم إلى `/about`.

// app/about/page.js
import React from 'react';

export default function AboutPage() {
  return (
    <div>
      <h1>من نحن</h1>
      <p>اعرف المزيد عن شركتنا.</p>
    </div>
  );
}

3. ملف `layout.js`

يُعرّف ملف `layout.js` (أو `layout.jsx`، `layout.ts`، `layout.tsx`) واجهة مستخدم مشتركة عبر صفحات متعددة ضمن جزء من المسار. التخطيطات مفيدة لإنشاء ترويسات وتذييلات وأشرطة جانبية متسقة وعناصر أخرى يجب أن تكون موجودة على صفحات متعددة.

مثال:

لنفترض أنك تريد إضافة ترويسة إلى كل من صفحة `/about` وصفحة افتراضية `/about/team`. يمكنك إنشاء ملف `layout.js` في مجلد `app/about`:

// app/about/layout.js
import React from 'react';

export default function AboutLayout({ children }) {
  return (
    <div>
      <header>
        <h1>حول شركتنا</h1>
      </header>
      <main>{children}</main>
    </div>
  );
}

سيتم استبدال الخاصية `children` بواجهة المستخدم التي يعرضها ملف `page.js` في نفس المجلد أو في أي مجلدات متداخلة.

4. ملف `template.js`

يشبه ملف `template.js` ملف `layout.js`، لكنه ينشئ مثيلاً جديدًا من المكون لكل مسار فرعي. هذا مفيد في السيناريوهات التي تريد فيها الحفاظ على حالة المكون أو منع إعادة العرض عند التنقل بين المسارات الفرعية. على عكس التخطيطات، سيتم إعادة عرض القوالب عند التنقل. استخدام القوالب رائع لتحريك العناصر عند التنقل.

مثال:

// app/template.js
'use client'

import { useState } from 'react'

export default function Template({ children }) {
  const [count, setCount] = useState(0)

  return (
    <main>
      <p>القالب: {count}</p>
      <button onClick={() => setCount(count + 1)}>تحديث القالب</button>
      {children}
    </main>
  )
}

5. ملف `loading.js`

يسمح لك ملف `loading.js` (أو `loading.jsx`، `loading.ts`، `loading.tsx`) بإنشاء واجهة مستخدم للتحميل يتم عرضها أثناء تحميل جزء من المسار. هذا مفيد لتوفير تجربة مستخدم أفضل عند جلب البيانات أو إجراء عمليات غير متزامنة أخرى.

مثال:

// app/about/loading.js
import React from 'react';

export default function Loading() {
  return <p>جاري تحميل معلومات 'من نحن'...</p>;
}

عندما ينتقل المستخدم إلى `/about`، سيتم عرض مكون `Loading` حتى يتم عرض مكون `page.js` بالكامل.

6. ملف `error.js`

يسمح لك ملف `error.js` (أو `error.jsx`، `error.ts`، `error.tsx`) بإنشاء واجهة مستخدم مخصصة للخطأ يتم عرضها عند حدوث خطأ داخل جزء من المسار. هذا مفيد لتوفير رسالة خطأ أكثر سهولة للمستخدم ومنع تعطل التطبيق بأكمله.

مثال:

// app/about/error.js
'use client'

import React from 'react';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>حدث خطأ!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>حاول مرة أخرى</button>
    </div>
  );
}

إذا حدث خطأ أثناء عرض صفحة `/about`، فسيتم عرض مكون `Error`. تحتوي خاصية `error` على معلومات حول الخطأ، وتسمح دالة `reset` للمستخدم بمحاولة إعادة تحميل الصفحة.

7. مجموعات المسارات

تسمح لك مجموعات المسارات `(groupName)` بتنظيم مساراتك دون التأثير على بنية عنوان URL. يتم إنشاؤها عن طريق تغليف اسم مجلد بين قوسين. هذا مفيد بشكل خاص لتنظيم التخطيطات والمكونات المشتركة.

مثال:

app/
  (marketing)/
    about/
      page.js
    contact/
      page.js
  (shop)/
    products/
      page.js

في هذا المثال، تم تجميع صفحتي `about` و `contact` تحت مجموعة `marketing`، وصفحة `products` تحت مجموعة `shop`. تظل عناوين URL هي `/about` و `/contact` و `/products` على التوالي.

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

تسمح لك المسارات الديناميكية بإنشاء مسارات بأجزاء متغيرة. هذا مفيد لعرض المحتوى بناءً على البيانات التي يتم جلبها من قاعدة بيانات أو واجهة برمجة تطبيقات. يتم تعريف أجزاء المسار الديناميكي عن طريق تغليف اسم الجزء بين قوسين مربعين (مثل `[id]`).

مثال:

لنفترض أنك تريد إنشاء مسار لعرض منشورات المدونة الفردية بناءً على معرفها. يمكنك إنشاء بنية ملفات مثل هذه:

app/
  blog/
    [id]/
      page.js

الجزء `[id]` هو جزء ديناميكي. سيتم عرض المكون المصدر من `app/blog/[id]/page.js` عندما ينتقل المستخدم إلى عنوان URL مثل `/blog/123` أو `/blog/456`. ستكون قيمة المعلمة `id` متاحة في خاصية `params` للمكون.

// app/blog/[id]/page.js
import React from 'react';

export default async function BlogPost({ params }) {
  const { id } = params;

  // جلب بيانات تدوينة المدونة بالمعرف المحدد
  const post = await fetchBlogPost(id);

  if (!post) {
    return <p>تدوينة المدونة غير موجودة.</p>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

async function fetchBlogPost(id) {
  // محاكاة جلب البيانات من قاعدة بيانات أو واجهة برمجة تطبيقات
  return new Promise((resolve) => {
    setTimeout(() => {
      const posts = {
        '123': { title: 'أول تدوينة لي', content: 'هذا هو محتوى أول تدوينة لي.' },
        '456': { title: 'تدوينة أخرى', content: 'هذا محتوى آخر مثير.' },
      };
      resolve(posts[id] || null);
    }, 500);
  });
}

يمكنك أيضًا استخدام أجزاء ديناميكية متعددة في المسار. على سبيل المثال، يمكن أن يكون لديك مسار مثل `/blog/[category]/[id]`.

9. الأجزاء الشاملة (Catch-all Segments)

تسمح لك الأجزاء الشاملة بإنشاء مسارات تطابق أي عدد من الأجزاء. هذا مفيد لسيناريوهات مثل إنشاء نظام إدارة محتوى حيث يتم تحديد بنية عنوان URL بواسطة المستخدم. يتم تعريف الأجزاء الشاملة بإضافة ثلاث نقاط قبل اسم الجزء (مثل `[...slug]`).

مثال:

app/
  docs/
    [...slug]/
      page.js

سيطابق الجزء `[...slug]` أي عدد من الأجزاء بعد `/docs`. على سبيل المثال، سيطابق `/docs/getting-started` و `/docs/api/users` و `/docs/advanced/configuration`. ستكون قيمة المعلمة `slug` عبارة عن مصفوفة تحتوي على الأجزاء المتطابقة.

// app/docs/[...slug]/page.js
import React from 'react';

export default function DocsPage({ params }) {
  const { slug } = params;

  return (
    <div>
      <h1>المستندات</h1>
      <p>Slug: {slug ? slug.join('/') : 'لا يوجد slug'}</p>
    </div>
  );
}

يمكن إنشاء أجزاء شاملة اختيارية عن طريق إضافة اسم الجزء بين قوسين مربعين مزدوجين `[[...slug]]`. هذا يجعل جزء المسار اختياريًا. مثال:

app/
  blog/
    [[...slug]]/
      page.js

سيؤدي هذا الإعداد إلى عرض مكون page.js في كل من `/blog` و `/blog/any/number/of/segments`.

10. المسارات المتوازية

تسمح لك المسارات المتوازية بعرض صفحة واحدة أو أكثر في نفس التخطيط بشكل متزامن. هذا مفيد بشكل خاص للتخطيطات المعقدة، مثل لوحات التحكم، حيث يمكن تحميل أقسام مختلفة من الصفحة بشكل مستقل. يتم تعريف المسارات المتوازية باستخدام الرمز `@` متبوعًا باسم الخانة (slot) (مثل `@sidebar`، `@main`).

مثال:

app/
  @sidebar/
    page.js  // محتوى للشريط الجانبي
  @main/
    page.js  // محتوى للقسم الرئيسي
  default.js // مطلوب: يحدد التخطيط الافتراضي للمسارات المتوازية

ملف `default.js` مطلوب عند استخدام المسارات المتوازية. يحدد كيفية دمج الخانات المختلفة لإنشاء التخطيط النهائي.

// app/default.js
export default function RootLayout({ children: { sidebar, main } }) {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', backgroundColor: '#f0f0f0' }}>
        {sidebar}
      </aside>
      <main style={{ flex: 1, padding: '20px' }}>
        {main}
      </main>
    </div>
  );
}

11. المسارات المعترضة

تسمح لك المسارات المعترضة بتحميل مسار من جزء مختلف من تطبيقك ضمن التخطيط الحالي. هذا مفيد لإنشاء النوافذ المنبثقة (modals) ومعارض الصور وعناصر واجهة المستخدم الأخرى التي يجب أن تظهر فوق محتوى الصفحة الحالي. يتم تعريف المسارات المعترضة باستخدام الصيغة `(..)`، والتي تشير إلى عدد المستويات التي يجب الصعود إليها في شجرة المجلدات للعثور على المسار المعترض.

مثال:

app/
  (.)photos/
    [id]/
      page.js  // المسار المعترض
  feed/
    page.js  // الصفحة التي يتم فيها عرض نافذة الصورة المنبثقة

في هذا المثال، عندما ينقر المستخدم على صورة في صفحة `/feed`، يتم اعتراض مسار `app/(.)photos/[id]/page.js` وعرضه كنافذة منبثقة فوق صفحة `/feed`. تخبر الصيغة `(.)` Next.js بالبحث مستوى واحد لأعلى (إلى مجلد `app`) للعثور على مسار `photos/[id]`.

جلب البيانات مع موجه التطبيقات

يوفر موجه التطبيقات دعمًا مدمجًا لجلب البيانات باستخدام مكونات الخادم (Server Components) ومكونات العميل (Client Components). يتم عرض مكونات الخادم على الخادم، بينما يتم عرض مكونات العميل على العميل. يتيح لك هذا اختيار أفضل نهج لكل مكون بناءً على متطلباته.

مكونات الخادم

مكونات الخادم هي الافتراضية في موجه التطبيقات. تسمح لك بجلب البيانات مباشرة في مكوناتك دون الحاجة إلى مسارات API منفصلة. يمكن أن يؤدي ذلك إلى تحسين الأداء وتبسيط الكود الخاص بك.

مثال:

// app/products/page.js
import React from 'react';

export default async function ProductsPage() {
  const products = await fetchProducts();

  return (
    <div>
      <h1>المنتجات</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts() {
  // محاكاة جلب البيانات من قاعدة بيانات أو واجهة برمجة تطبيقات
  return new Promise((resolve) => {
    setTimeout(() => {
      const products = [
        { id: 1, name: 'منتج أ' },
        { id: 2, name: 'منتج ب' },
        { id: 3, name: 'منتج ج' },
      ];
      resolve(products);
    }, 500);
  });
}

في هذا المثال، يتم استدعاء دالة `fetchProducts` مباشرة داخل مكون `ProductsPage`. يتم عرض المكون على الخادم، ويتم جلب البيانات قبل إرسال HTML إلى العميل.

مكونات العميل

يتم عرض مكونات العميل على العميل وتسمح لك باستخدام ميزات جانب العميل مثل مستمعي الأحداث (event listeners) والحالة (state) وواجهات برمجة تطبيقات المتصفح. لاستخدام مكون العميل، تحتاج إلى إضافة التوجيه `'use client'` في أعلى الملف.

مثال:

// app/counter/page.js
'use client'

import React, { useState } from 'react';

export default function CounterPage() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>العداد</h1>
      <p>العدد: {count}</p>
      <button onClick={() => setCount(count + 1)}>زيادة</button>
    </div>
  );
}

في هذا المثال، مكون `CounterPage` هو مكون عميل لأنه يستخدم خطاف `useState`. يخبر التوجيه `'use client'` Next.js بعرض هذا المكون على العميل.

تقنيات التوجيه المتقدمة

يقدم موجه التطبيقات العديد من تقنيات التوجيه المتقدمة التي يمكن استخدامها لإنشاء تطبيقات معقدة ومتطورة.

1. معالجات المسارات (Route Handlers)

تسمح لك معالجات المسارات بإنشاء نقاط نهاية API داخل مجلد `app` الخاص بك. هذا يلغي الحاجة إلى مجلد `pages/api` منفصل. يتم تعريف معالجات المسارات في ملفات تسمى `route.js` (أو `route.ts`) وتصدير وظائف تتعامل مع أساليب HTTP المختلفة (مثل `GET`، `POST`، `PUT`، `DELETE`).

مثال:

// app/api/users/route.js
import { NextResponse } from 'next/server'

export async function GET(request) {
  // محاكاة جلب المستخدمين من قاعدة بيانات
  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
  ];

  return NextResponse.json(users);
}

export async function POST(request) {
  const body = await request.json()
  console.log('البيانات المستلمة:', body)
  return NextResponse.json({ message: 'تم إنشاء المستخدم' }, { status: 201 })
}

يحدد هذا المثال معالج مسار في `/api/users` يتعامل مع طلبات `GET` و `POST`. تعيد دالة `GET` قائمة بالمستخدمين، وتنشئ دالة `POST` مستخدمًا جديدًا.

2. مجموعات المسارات مع تخطيطات متعددة

يمكنك دمج مجموعات المسارات مع التخطيطات لإنشاء تخطيطات مختلفة لأقسام مختلفة من تطبيقك. هذا مفيد للسيناريوهات التي تريد فيها أن يكون لديك ترويسة أو شريط جانبي مختلف لأجزاء مختلفة من موقعك.

مثال:

app/
  (marketing)/
    layout.js  // تخطيط التسويق
    about/
      page.js
    contact/
      page.js
  (admin)/
    layout.js  // تخطيط الإدارة
    dashboard/
      page.js

في هذا المثال، ستستخدم صفحتا `about` و `contact` تخطيط `marketing`، بينما ستستخدم صفحة `dashboard` تخطيط `admin`.

3. الوسيط (Middleware)

يسمح لك الوسيط بتشغيل كود قبل معالجة الطلب بواسطة تطبيقك. هذا مفيد لمهام مثل المصادقة والترخيص والتسجيل وإعادة توجيه المستخدمين بناءً على موقعهم أو أجهزتهم.

يتم تعريف الوسيط في ملف يسمى `middleware.js` (أو `middleware.ts`) في جذر مشروعك.

مثال:

// middleware.js
import { NextResponse } from 'next/server'

export function middleware(request) {
  // تحقق مما إذا كان المستخدم مصادقًا عليه
  const isAuthenticated = false; // استبدل بمنطق المصادقة الخاص بك

  if (!isAuthenticated && request.nextUrl.pathname.startsWith('/admin')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

// انظر "مسارات المطابقة" أدناه لمعرفة المزيد
export const config = {
  matcher: '/admin/:path*',
}

يحدد هذا المثال وسيطًا يتحقق مما إذا كان المستخدم مصادقًا عليه قبل السماح له بالوصول إلى أي مسار تحت `/admin`. إذا لم يكن المستخدم مصادقًا عليه، يتم إعادة توجيهه إلى صفحة `/login`.

أفضل الممارسات للتوجيه القائم على الملفات

لتحقيق أقصى استفادة من نظام التوجيه القائم على الملفات في موجه التطبيقات، ضع في اعتبارك أفضل الممارسات التالية:

• حافظ على تنظيم بنية ملفاتك: استخدم أسماء مجلدات ذات معنى وقم بتجميع الملفات ذات الصلة معًا.
• استخدم التخطيطات لواجهة المستخدم المشتركة: أنشئ تخطيطات للترويسات والتذييلات والأشرطة الجانبية والعناصر الأخرى المشتركة عبر صفحات متعددة.
• استخدم واجهات مستخدم التحميل: وفر واجهات مستخدم للتحميل للمسارات التي تجلب البيانات أو تقوم بعمليات غير متزامنة أخرى.
• تعامل مع الأخطاء بأمان: أنشئ واجهات مستخدم مخصصة للأخطاء لتوفير تجربة مستخدم أفضل عند حدوث أخطاء.
• استخدم مجموعات المسارات للتنظيم: استخدم مجموعات المسارات لتنظيم مساراتك دون التأثير على بنية عنوان URL.
• استفد من مكونات الخادم لتحسين الأداء: استخدم مكونات الخادم لجلب البيانات وعرض واجهة المستخدم على الخادم، مما يحسن الأداء وتحسين محركات البحث (SEO).
• استخدم مكونات العميل عند الضرورة: استخدم مكونات العميل عندما تحتاج إلى استخدام ميزات جانب العميل مثل مستمعي الأحداث والحالة وواجهات برمجة تطبيقات المتصفح.

أمثلة على التدويل (Internationalization) مع موجه تطبيقات Next.js

يبسط موجه تطبيقات Next.js التدويل (i18n) من خلال التوجيه القائم على الملفات. إليك كيفية تنفيذ التدويل بفعالية:

1. التوجيه بالمسار الفرعي

نظم مساراتك بناءً على اللغة باستخدام المسارات الفرعية. على سبيل المثال:

app/
  [locale]/
    page.tsx         // الصفحة الرئيسية للغة
    about/
      page.tsx     // صفحة 'من نحن' للغة

// app/[locale]/page.tsx
import { getTranslations } from './dictionaries';

export default async function HomePage({ params: { locale } }) {
  const t = await getTranslations(locale);
  return (<h1>{t.home.title}</h1>);
}

// dictionaries.js
const dictionaries = {
  en: () => import('./dictionaries/en.json').then((module) => module.default),
  es: () => import('./dictionaries/es.json').then((module) => module.default),
};

export const getTranslations = async (locale) => {
  try {
    return dictionaries[locale]() ?? dictionaries.en();
  } catch (error) {
    console.error(`فشل تحميل الترجمات للغة ${locale}`, error);
    return dictionaries.en();
  }
};

في هذا الإعداد، يعالج جزء المسار الديناميكي `[locale]` اللغات المختلفة (مثل `/en`، `/es`). يتم تحميل الترجمات ديناميكيًا بناءً على اللغة.

2. التوجيه بالنطاق

لنهج أكثر تقدمًا، يمكنك استخدام نطاقات أو نطاقات فرعية مختلفة لكل لغة. يتضمن هذا غالبًا تكوينًا إضافيًا مع مزود الاستضافة الخاص بك.

3. الوسيط (Middleware) لاكتشاف اللغة

استخدم الوسيط لاكتشاف لغة المستخدم المفضلة تلقائيًا وإعادة توجيههم وفقًا لذلك.

// middleware.js
import { NextResponse } from 'next/server';
import { match } from '@formatjs/intl-localematcher';
import Negotiator from 'negotiator';

let locales = ['en', 'es', 'fr']; // اللغات المدعومة

function getLocale(request) {
  const negotiatorHeaders = {};
  request.headers.forEach((value, key) => (negotiatorHeaders[key] = value));
  let languages = new Negotiator({ headers: negotiatorHeaders }).languages();

  try {
      return match(languages, locales, 'en'); // استخدم 'en' كلغة افتراضية
  } catch (error) {
      console.error("خطأ في مطابقة اللغة:", error);
      return 'en'; // العودة إلى الإنجليزية إذا فشلت المطابقة
  }
}

export function middleware(request) {
  const pathname = request.nextUrl.pathname;
  const pathnameIsMissingLocale = locales.every(
    (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
  );

  if (pathnameIsMissingLocale) {
    const locale = getLocale(request);

    return NextResponse.redirect(
      new URL(
        `/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`,
        request.url
      )
    );
  }
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

يتحقق هذا الوسيط مما إذا كان المسار المطلوب يحتوي على بادئة لغة. إذا لم يكن كذلك، فإنه يكتشف لغة المستخدم المفضلة باستخدام ترويسة `Accept-Language` ويعيد توجيههم إلى المسار المناسب الخاص باللغة. تُستخدم مكتبات مثل `@formatjs/intl-localematcher` و `negotiator` للتعامل مع مفاوضات اللغة.

موجه تطبيقات Next.js وإمكانية الوصول العالمية

يتطلب إنشاء تطبيقات ويب يمكن الوصول إليها عالميًا دراسة متأنية لمبادئ إمكانية الوصول (a11y). يوفر موجه تطبيقات Next.js أساسًا متينًا لبناء تجارب يمكن الوصول إليها، ولكن من الضروري تنفيذ أفضل الممارسات لضمان أن تطبيقك قابل للاستخدام من قبل الجميع، بغض النظر عن قدراتهم.

اعتبارات إمكانية الوصول الرئيسية

1. HTML الدلالي: استخدم عناصر HTML الدلالية (مثل `<article>`, `<nav>`, `<aside>`, `<main>`) لهيكلة المحتوى الخاص بك. يوفر هذا معنى للتقنيات المساعدة ويساعد المستخدمين على التنقل في موقعك بسهولة أكبر.
2. سمات ARIA: استخدم سمات ARIA (تطبيقات الإنترنت الغنية التي يمكن الوصول إليها) لتعزيز إمكانية الوصول للمكونات المخصصة والأدوات. توفر سمات ARIA معلومات إضافية حول دور وحالة وخصائص العناصر للتقنيات المساعدة.
3. التنقل بلوحة المفاتيح: تأكد من أن جميع العناصر التفاعلية يمكن الوصول إليها عبر لوحة المفاتيح. يجب أن يتمكن المستخدمون من التنقل عبر تطبيقك باستخدام مفتاح `Tab` والتفاعل مع العناصر باستخدام مفتاح `Enter` أو `Space`.
4. تباين الألوان: استخدم تباين ألوان كافٍ بين النص والخلفية لضمان سهولة القراءة للمستخدمين الذين يعانون من ضعف البصر. توصي إرشادات الوصول إلى محتوى الويب (WCAG) بنسبة تباين لا تقل عن 4.5:1 للنص العادي و 3:1 للنص الكبير.
5. نص بديل للصور: وفر نصًا بديلاً وصفيًا لجميع الصور. يوفر النص البديل بديلاً نصيًا للصور يمكن قراءته بواسطة قارئات الشاشة.
6. تسميات النماذج: اربط تسميات النماذج بحقول الإدخال المقابلة لها باستخدام عنصر `<label>`. هذا يوضح للمستخدمين ما هي المعلومات المتوقعة في كل حقل.
7. اختبار قارئ الشاشة: اختبر تطبيقك باستخدام قارئ الشاشة للتأكد من أنه يمكن الوصول إليه من قبل المستخدمين الذين يعانون من ضعف البصر. تشمل قارئات الشاشة الشائعة NVDA و JAWS و VoiceOver.

تنفيذ إمكانية الوصول في موجه تطبيقات Next.js

1. استخدام مكون Next.js Link: استخدم مكون `<Link>` للتنقل. يوفر ميزات إمكانية وصول مدمجة، مثل الجلب المسبق وإدارة التركيز.
2. إدارة التركيز: عند التنقل بين الصفحات أو فتح النوافذ المنبثقة، تأكد من إدارة التركيز بشكل صحيح. يجب تعيين التركيز على العنصر الأكثر منطقية في الصفحة الجديدة أو النافذة المنبثقة.
3. مكونات مخصصة يمكن الوصول إليها: عند إنشاء مكونات مخصصة، تأكد من أنها يمكن الوصول إليها باتباع المبادئ الموضحة أعلاه. استخدم HTML الدلالي وسمات ARIA والتنقل بلوحة المفاتيح لجعل مكوناتك قابلة للاستخدام من قبل الجميع.
4. التدقيق والاختبار: استخدم أدوات التدقيق مثل ESLint مع إضافات إمكانية الوصول لتحديد مشكلات إمكانية الوصول المحتملة في الكود الخاص بك. استخدم أيضًا أدوات الاختبار الآلي لاختبار تطبيقك بحثًا عن انتهاكات إمكانية الوصول.

الخاتمة

يقدم نظام التوجيه القائم على الملفات في موجه تطبيقات Next.js طريقة قوية وبديهية لهيكلة تطبيقاتك والتنقل فيها. من خلال فهم المفاهيم الأساسية وأفضل الممارسات الموضحة في هذا الدليل، يمكنك بناء تطبيقات Next.js قوية وقابلة للتطوير والصيانة. جرب الميزات المختلفة لموجه التطبيقات واكتشف كيف يمكنه تبسيط سير عملك في التطوير وتحسين تجربة المستخدم.