إتقان موجه تطبيقات Next.js: من الصفحات إلى التخطيطات (Next.js 15)

مقدمة

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

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

المتطلبات الأساسية

قبل استخدام موجه تطبيقات Next.js، تأكد من أن لديك:

Node.js 18.17+
npm أو yarn
فهم أساسي لـReact وNext.js
(اختياري) مشروع Next.js 14 موجود للترحيل

للتحقق من Node.js:

node -v

node -v

إذا كان أقل من 18.17، قم بتنزيل أحدث إصدار من nodejs.org.

الخطوة 1 – إنشاء مشروع Next.js 15 جديد

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

npx create-next-app@latest my-app
cd my-app
npm run dev

npx create-next-app@latest my-app
cd my-app
npm run dev

ستلاحظ وجود دليل جديد يسمى app/. هذا المجلد هو أساس نظام التوجيه الجديد.

افتح متصفحك عند http://localhost:3000 لتأكيد تشغيل المشروع بنجاح.

الخطوة 2 – استكشاف هيكل دليل التطبيق

يستخدم موجه تطبيقات Next.js المجلدات كمسارات:

app/
 ├─ layout.tsx
 ├─ page.tsx
 ├─ globals.css
 └─ favicon.ico

app/
 ├─ layout.tsx
 ├─ page.tsx
 ├─ globals.css
 └─ favicon.ico

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

على سبيل المثال، يحدد ملف layout.tsx الرؤوس المشتركة وأشرطة التنقل والتذييلات.

الاختلافات الرئيسية عن موجه الصفحات:

كل مجلد داخل app/ هو جزء من المسار.
يمكن أن يكون لكل جزء layout.tsx الخاص به، page.tsx، loading.tsx، أو error.tsx.
المكونات في موجه التطبيقات هي مكونات خادم React بشكل افتراضي، مما يحسن الأداء عن طريق تشغيل الكود على الخادم.

الخطوة 3 – الترحيل من موجه الصفحات

في المشاريع القديمة، قد تبدو مساراتك هكذا:

pages/about.js

pages/about.js

باستخدام موجه تطبيقات Next.js، ستنقلها إلى:

app/about/page.tsx

app/about/page.tsx

مثال على التحويل:

قديم (موجه الصفحات):

export default function About() {
 return <h1>About Us</h1>;
}

export default function About() {
  return <h1>About Us</h1>;
}

جديد (موجه التطبيقات):

export default function AboutPage() {
 return <h1>About Us</h1>;
}

export default function AboutPage() {
  return <h1>About Us</h1>;
}

اسم المجلد (about) يحدد المسار تلقائيًا — لا حاجة لتكوين موجه منفصل.

الخطوة 4 – إضافة التخطيطات والمسارات المتداخلة

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

مثال على الدليل:

app/
 ├─ layout.tsx
 ├─ dashboard/
 │ ├─ layout.tsx
 │ └─ page.tsx
 └─ settings/
 └─ page.tsx

app/
 ├─ layout.tsx
 ├─ dashboard/
 │   ├─ layout.tsx
 │   └─ page.tsx
 └─ settings/
     └─ page.tsx

التخطيط الجذري layout.tsx

export default function RootLayout({ children }) {
 return (
    <html lang="en">
      <body>
        <header>My App</header>
        {children}
        <footer>© 2025 My App</footer>
      </body>
    </html>
 );
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>My App</header>
        {children}
        <footer>© 2025 My App</footer>
      </body>
    </html>
  );
}

تخطيط لوحة التحكم layout.tsx

export default function DashboardLayout({ children }) {
 return (
    <section>
      <aside>Sidebar</aside>
      <main>{children}</main>
    </section>
 );
}

export default function DashboardLayout({ children }) {
  return (
    <section>
      <aside>Sidebar</aside>
      <main>{children}</main>
    </section>
  );
}

كل تخطيط يلتف فقط حول أحفاده المباشرين، مما يسمح بتسلسل هرمي للصفحات المتداخلة والمودولارية.

الخطوة 5 – معالجة البيانات الوصفية وتحسين محركات البحث

يستبدل موجه تطبيقات Next.js <Head> بنظام بيانات وصفية أنظف.

مثال:

export const metadata = {
 title: 'About Us – My App',
 description: 'Learn more about our team and mission.',
};

export default function AboutPage() {
 return <h1>About Us</h1>;
}

export const metadata = {
  title: 'About Us – My App',
  description: 'Learn more about our team and mission.',
};

export default function AboutPage() {
  return <h1>About Us</h1>;
}

يمكنك أيضًا إنشاء البيانات الوصفية ديناميكيًا:

export async function generateMetadata({ params }) {
 const data = await getData(params.id);
 return { title: `${data.name} – Profile` };
}

export async function generateMetadata({ params }) {
  const data = await getData(params.id);
  return { title: `${data.name} – Profile` };
}

الخطوة 6 – مكونات الخادم وجلب البيانات

واحدة من أفضل ميزات موجه تطبيقات Next.js هي كيفية دمجه مع مكونات خادم React لجلب البيانات بكفاءة:

مثال:

export default async function UsersPage() {
 const res = await fetch('https://jsonplaceholder.typicode.com/users');
 const users = await res.json();

 return (
    <ul>
 {users.map(user => (
        <li key={user.id}>{user.name}</li>
 ))}
    </ul>
 );
}

export default async function UsersPage() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await res.json();

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

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

إذا كنت بحاجة إلى تفاعل من جانب العميل (مثل الحالة أو التأثيرات)، أضف "use client" في أعلى ملفك:

"use client";
import { useState } from "react";

"use client";
import { useState } from "react";

الخطوة 7 – مشاكل الترحيل الشائعة والحلول

المشكلة	السبب	الحل
عدم تحميل الأنماط	فقدان استيراد CSS العالمي	استيراد `globals.css` في `layout.tsx`.
أخطاء useRouter	استيراد `next/router` القديم	استخدم الخطافات الجديدة `next/navigation`.
عدم عمل المسارات الديناميكية	عدم تطابق صيغة `[param].js` القديمة	احتفظ بنفس التسمية (`[id]/page.tsx`) ولكن انقلها داخل `app/`.
فقدان مكون الرأس	`next/head` تم إهماله	استخدم التصدير الجديد `metadata`.

للحصول على ملاحظات الترحيل التفصيلية، راجع وثائق Next.js 15.

الخاتمة

يتيح الترحيل إلى موجه التطبيقات قدرات جديدة قوية في Next.js 15 — بما في ذلك مكونات الخادم، والتخطيطات المتداخلة، وتكوين تحسين محركات البحث الأكثر توقعًا.
من خلال فهم هيكل الدليل واعتماد نموذج جلب البيانات الجديد، يمكنك بناء تطبيقات أنظف وأسرع وأكثر قابلية للتوسع.

إذا كنت تبدأ مشروعًا جديدًا اليوم، فإن موجه التطبيقات هو الخيار الافتراضي والمفضل.

اكتب تعليق