تخطَّ إلى المحتوى

شرح Next.js

التثبيت وبنية المشروع

الدرس 6 من 25· ⏱ 1 دقائق قراءة

إنشاء مشروع

npx create-next-app@latest my-app
cd my-app
npm run dev      # http://localhost:3000

بنية App Router

my-app/
├── app/
│   ├── layout.tsx      # التخطيط الجذري
│   ├── page.tsx        # الصفحة الرئيسية (/)
│   └── globals.css
├── public/             # ملفّات ثابتة (صور...)
├── next.config.ts
└── package.json

الملفّات الخاصّة داخل app/

الملفالوظيفة
page.tsxواجهة المسار (route)
layout.tsxغلاف مشترك للمسارات الفرعية
loading.tsxحالة التحميل
error.tsxمعالجة الأخطاء
not-found.tsxصفحة 404

أوّل صفحة

// app/page.tsx
export default function Home() {
  return <h1>مرحبًا Next.js</h1>;
}

🎯 التالي: الصفحات والتخطيطات.

هل كان هذا الدرس مفيدًا؟