دليل Next.js للمبتدئين: App Router في مشروع واحد

الإجابة المختصرة: في App Router من Next.js، كل مجلد داخل app/ يصبح جزءًا من الرابط، والملف المسمى page.tsx يحوّل هذا الرابط إلى صفحة حقيقية. الملف app/page.tsx هو الصفحة الرئيسية، والملف app/about/page.tsx يمثل الرابط /about، أما layout.tsx فيغلف الصفحات التي تحته بأجزاء مشتركة مثل شريط التنقل. أنشئ مشروعًا بالأمر npx create-next-app@latest، واقبل الإعدادات الافتراضية الموصى بها، واجلب البيانات داخل مكونات الخادم (server components) غير المتزامنة، وأضف "use client" فقط إلى الأجزاء التي يضغط عليها المستخدم، ثم نفّذ npm run build وانشر المشروع. هذا هو المسار الكامل للمبتدئ، وسيرشدك هذا الدليل خلاله عبر مشروع حقيقي: موقع شخصي لـ mouhimen.dev.

شاهد الفيديو (حوالي 10 دقائق):

كيف تحققت من المعلومات. جرّبت كل ما في هذا الدليل بتاريخ 9 نوفمبر 2026 باستخدام Next.js 16.4.5، وهو أحدث إصدار مستقر على npm في ذلك اليوم. أنشأت المشروع باستخدام create-next-app، وكتبت كل ملف وارد أدناه، ثم شغّلت next build. رسائل الأخطاء الأربع في هذا الدليل منقولة من ذلك التشغيل، وليست من الذاكرة. أما المعلومات فمصدرها الوثائق الرسمية المرفقة مع الحزمة نفسها (node_modules/next/dist/docs/).

ما الذي تحتاجه

• Node.js 20.9 أو أحدث (الحد الأدنى لـ Next.js 16). تحقق من ذلك بالأمر node -v.
• محرر أكواد (VS Code أو Cursor أو أي محرر تفضله).
• معرفة بسيطة بـ HTML وJavaScript. تفيد معرفة React، لكنها ليست شرطًا لمتابعة الدليل.
• للخطوة الخاصة بالنشر: حساب مجاني على GitHub وحساب على Vercel.

لماذا Next.js بدلًا من React العادي؟

مكتبة React تمنحك المكونات فقط. ستحتاج بعد ذلك إلى اختيار نظام للتوجيه (Router)، وطريقة لجلب البيانات، وإعداد لعملية البناء بنفسك. أما Next.js فيوفر كل ذلك في إطار عمل واحد، ويُنشئ الصفحات على الخادم أولًا، لذلك تُحمَّل بسرعة، ويستطيع محركات البحث مثل Google قراءتها. يُعد App Router (مجلد app/) الطريقة التي توصي بها وثائق Next.js لبناء التطبيقات الجديدة اليوم.

الخطوة 1: إنشاء التطبيق

افتح الطرفية (Terminal) ونفّذ الأمر:

npx create-next-app@latest mouhimen-portfolio

سيسألك: Would you like to use the recommended Next.js defaults? اختر Yes, use recommended defaults. في Next.js 16.4 يمنحك هذا الخيار TypeScript وESLint وTailwind CSS وApp Router، ولا يُنشئ مجلد src/، ويفعّل Cache Components، ويضيف ملفًا اسمه AGENTS.md (سنتحدث عنه في نهاية الدليل).

شغّل خادم التطوير:

cd mouhimen-portfolio
npm run dev

افتح الرابط http://localhost:3000 وسترى صفحة البداية. يستخدم Next.js 16 محرك Turbopack افتراضيًا، لذلك يبدأ التشغيل خلال ثانية تقريبًا.

الفكرة الأساسية وراء المسارات

الملف	الرابط
app/page.tsx	/
app/about/page.tsx	/about
app/projects/page.tsx	/projects
app/projects/[slug]/page.tsx	/projects/anything
app/layout.tsx	يغلف كل الصفحات

المجلد وحده ليس صفحة. يصبح المسار متاحًا للعامة فقط عندما يوجد داخله ملف page.tsx (أو route.ts بالنسبة للواجهات البرمجية APIs).

الخطوة 2: الصفحات والتخطيط والروابط

استبدل الكود الجاهز في app/page.tsx بقسم ترحيبي بسيط:

import Link from "next/link";export default function Home() {
  return (
    <main className="mx-auto max-w-3xl px-8 py-24">
      <h1 className="text-5xl font-bold">Hi, I&apos;m Abd almouhimen Shamout</h1>
      <p className="mt-4 text-xl text-zinc-600">I build Laravel APIs and Next.js apps.</p>
      <Link href="/projects" className="mt-8 inline-block rounded-lg bg-teal-600 px-6 py-3 text-white">
        See my projects
      </Link>
    </main>
  );
}

أسماء الفئات (class names) في هذا الكود تعود إلى Tailwind CSS، وقد أعدّه create-next-app مسبقًا.

الآن أضف صفحة “من أنا”. أنشئ المجلد app/about وداخله ملف page.tsx:

export default function AboutPage() {
  return <h1 className="text-4xl font-bold">About me</h1>;
}

احفظ الملف، وسيعمل الرابط /about مباشرة. لا تحتاج إلى إعداد إضافي للتوجيه ولا إلى حزمة إضافية.

تحتاج كل صفحة إلى شريط التنقل نفسه، لذلك أنشئ مكونًا في الملف components/Navbar.tsx. استخدم المكون Link من next/link بدلًا من وسم <a> العادي. فالمكون Link ينتقل بين الصفحات دون إعادة تحميل كاملة للصفحة، ويحمّل Next.js الصفحة مسبقًا عندما تظهر الرابط في الشاشة.

import Link from "next/link";export default function Navbar() {
  return (
    <nav className="flex gap-6 px-8 py-4 border-b">
      <Link href="/" className="font-bold">mouhimen.dev</Link>
      <Link href="/projects">Projects</Link>
      <Link href="/about">About</Link>
    </nav>
  );
}

ثم أضف المكون إلى التخطيط الجذري (root layout) في الملف app/layout.tsx. التخطيط الجذري إلزامي، ويجب أن يحتفظ بوسمي <html> و<body>. وبالمناسبة، غيّر العنوان في البيانات الوصفية (metadata)، فهو يظهر في عنوان تبويب المتصفح وفي العنوان الذي يعرضه Google:

import type { Metadata } from "next";
import "./globals.css";
import Navbar from "@/components/Navbar";export const metadata: Metadata = {
  title: "Abd almouhimen Shamout | mouhimen.dev",
  description: "Full stack developer: Laravel APIs and Next.js apps.",
};
export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        {children}

---

هذا المقال ترجمة عربية للمقال الأصلي باللغة الإنجليزية للكاتب عبد المهيمن شموط على mouhimen.dev.