إنشاء مشروع
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>;
}
🎯 التالي: الصفحات والتخطيطات.