Next.js: إعداد البيئة وهيكل المشروع

# أمر تفاعلي، فقط أجب عن بعض الأسئلة البسيطة
npx create-next-app@latest taskflow --ts --tailwind --app --src-dir --import-alias "@/*"

# تشغيل أمر السقالات
npx create-next-app@latest

? What is your project named?  taskflow
? Would you like to use TypeScript?  Yes / No
? Would you like to use ESLint?  Yes / No
? Would you like to use Tailwind CSS?  Yes / No
? Would you like to use `src/` directory?  Yes / No
? Would you like to use App Router? (recommended)  Yes / No
? Would you like to customize the import alias (`@/*` by default)?  No

# الخيارات الموصى بها لهذا البرنامج التعليمي (جميع المشاريع تستخدم هذه المجموعة)
npx create-next-app@latest taskflow ^
  --typescript ^
  --eslint ^
  --tailwind ^
  --src-dir ^
  --app ^
  --import-alias "@/*"

# ============================================
# إنشاء مشروع جديد باسم shophub
# ============================================

npx create-next-app@latest shophub --ts --tailwind --app --src-dir

# مخرجات الطرفية
cd shophub
npm run dev

Creating a new Next.js project in C:\Users\Charlie\shophub.

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the import alias? … @/*

Success! Created shophub at shophub
Inside that directory, you can run:
  npm run dev       # تشغيل خادم التطوير
  npm run build     # بناء نسخة الإنتاج
  npm start         # تشغيل خادم الإنتاج

Diagram: shophub/; src/; public/; ملفات تكوين أخرى; app/; app/globals.css.

// ============================================
// create-next-app الصفحة الرئيسية الافتراضية
// ============================================

import Image from "next/image";

export default function Home() {
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
        <Image
          className="dark:invert"
          src="/next.svg"
          alt="Next.js logo"
          width={180}
          height={38}
          priority
        />
        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
          <li className="mb-2">
            Get started by editing{" "}
            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
              src/app/page.tsx
            </code>
          </li>
          <li>Save and see your changes instantly.</li>
        </ol>
        <div className="flex gap-4 items-center flex-col sm:flex-row">
          <a className="...">Deploy now</a>
          <a className="...">Read our docs</a>
        </div>
      </main>
    </div>
  );
}

يعرض: مكون Home مع عناصر واجهة المستخدم الموصوفة.

افتح في المتصفح http://localhost:3000، كما ترى:
- شعار Next.js الرسمي
- عرض "Get started by editing src/app/page.tsx"
- رابطا "Deploy now" و"Read our docs"
- استجابة للوضع الداكن/الفاتح

public/
├── favicon.ico      # أيقونة علامة تبويب المتصفح
├── file.svg         # أيقونة نوع الملف
├── globe.svg        # أيقونة الكرة الأرضية
├── next.svg         # شعار Next.js
├── vercel.svg       # شعار Vercel
└── window.svg       # أيقونة النافذة

// الإشارة إلى الصور في دليل public داخل المكون
<img src="/logo.png" alt="Logo" />
// أو استخدام مكون next/image
import Image from 'next/image';
<Image src="/logo.png" alt="Logo" width={200} height={100} />

TypeScript compiled.

// ============================================
// next.config.ts — تكوين وقت ترجمة Next.js
// ============================================

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // السماح بتحميل الصور الخارجية من النطاقات المحددة
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "fakestoreapi.com",
      },
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
    ],
  },

  // تفعيل PPR (العرض المسبق الجزئي)
  experimental: {
    ppr: true,
  },
};

export default nextConfig;

المكون يعرض واجهة المستخدم الخاصة به.

بعد تفعيل التكوين:
1. مكونات <Image> يمكنها تحميل الصور من fakestoreapi.com وimages.unsplash.com
2. المحتوى بعد حدود Suspense في الصفحة سيستخدم عرض PPR المتدفق
3. أعد تشغيل npm run dev ليصبح التكوين ساريًا

# الانتقال إلى دليل المشروع
cd shophub

# تشغيل خادم التطوير
npm run dev

  ▲ Next.js 16.0.0
  - Local:        http://localhost:3000
  - Environments: .env.local

 ✓ Starting...
 ✓ Ready in 1.2s

# ============================================
# تشغيل خادم التطوير، ملاحظة سرعة Turbopack القصوى في HMR
# ============================================

npm run dev

# مخرجات الطرفية
> shophub@0.1.0 dev
> next dev

  ▲  ▲
  ▲  Next.js 16.2
  ▲  - Local: http://localhost:3000
  ▲  - Turbopack: ✓ loaded in 742ms

✔ Compiled /src/app/page.tsx in 142ms (modules: 523)

✔ Updated /src/app/page.tsx in 4ms    ← 4 ميلي ثانية! تحديثات شبه فورية

  ▲ Next.js 16.2
  - Local: http://localhost:3000
  - Turbopack: ✓ loaded in 742ms

✔ Compiled /src/app/page.tsx in 142ms (modules: 523)
✔ Updated /src/app/page.tsx in 4ms    ← 4 ميلي ثانية! تحديثات شبه فورية

# بناء نسخة الإنتاج
npm run build

✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages (5/5)
✓ Collecting build traces
✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    5.1 kB          89 kB
├ ○ /_not-found                          152 B          84.1 kB
└ λ /api/hello                           0 B            84.1 kB
+ First Load JS shared by all            84.1 kB
  ├ chunks/main-app                      ...
  └ chunks/webpack                       ...

○  (Static)  توليد ثابت (SSG)
λ  (Dynamic) عرض ديناميكي (SSR)

(انظر المخرجات أعلاه)

# ============================================
# تفسير مخرجات بناء الإنتاج
# ============================================

# لنفترض أنه تم إنشاء صفحتين:
# app/about/page.tsx وapp/dashboard/page.tsx
# من بينها dashboard تستخدم دوال ديناميكية cookies()

npm run build

# معنى الرموز في المخرجات:
○  /              # صفحة ثابتة (لا دوال ديناميكية)
○  /about         # صفحة ثابتة
λ  /dashboard     # صفحة ديناميكية (استخدمت API ديناميكي)
○  /_not-found    # صفحة 404

Route (app)                              Size     First Load JS
┌ ○ /                                    5.1 kB          89 kB
├ ○ /about                               3.2 kB          87 kB
├ λ /dashboard                           6.8 kB          92 kB
└ ○ /_not-found                          152 B          84.1 kB

Route (app)                              Size     First Load JS
┌ ○ /                                    5.1 kB          89 kB
├ ○ /about                               3.2 kB          87 kB
├ λ /dashboard                           6.8 kB          92 kB
└ ○ /_not-found                          152 B          84.1 kB

○  (Static)  توليد ثابت (SSG)
λ  (Dynamic) عرض ديناميكي (SSR)

# تشغيل خادم الإنتاج بعد النشر
npm run build
npm start

{
  "name": "shophub",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^16.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@types/node": "^22.0.0",
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "typescript": "^5.7.0",
    "tailwindcss": "^4.0.0",
    "eslint": "^9.0.0",
    "@eslint/eslintrc": "^3.0.0"
  }
}

JSON structure with scripts (dev, build, start, lint, type-check, format, preview) and their corresponding CLI commands.

// ============================================
// إضافة سكربتات مخصصة شائعة الاستخدام في package.json
// ============================================

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "type-check": "tsc --noEmit",
    "format": "prettier --write .",
    "preview": "npm run build && npm start"
  }
}

npm run type-check   → تشغيل فحص أنواع TypeScript (لا يخرج ملفات)
npm run format       → تنسيق جميع الكود باستخدام Prettier
npm run preview      → بناء أولاً، ثم تشغيل خادم الإنتاج (بأمر واحد)

npm run type-check   → تشغيل فحص أنواع TypeScript (لا يخرج ملفات)
npm run format       → تنسيق جميع الكود باستخدام Prettier
npm run preview      → بناء أولاً، ثم تشغيل خادم الإنتاج (بأمر واحد)

# ============================================
# مثال شامل: بناء مشروع Next.js 16 كامل من الصفر
# TaskFlow — منصة إدارة تعاون المشاريع
# ============================================

# 1. إنشاء مشروع
npx create-next-app@latest taskflow ^
  --typescript ^
  --eslint ^
  --tailwind ^
  --src-dir ^
  --app ^
  --import-alias "@/*"

# 2. الانتقال إلى دليل المشروع
cd taskflow

# 3. عرض هيكل الدليل
tree . /F | findstr /r "^.*src" > nul && dir /s /b src

# 4. تشغيل خادم التطوير
npm run dev

# 5. في طرفية أخرى، إضافة تخطيط VS Code الموصى به
mkdir .vscode

// .vscode/settings.json — تكوين على مستوى المشروع
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

// src/app/page.tsx — تغيير الصفحة الرئيسية إلى صفحة ترحيب TaskFlow
import Link from "next/link";

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      <div className="container mx-auto px-4 py-16 text-center">
        <h1 className="text-5xl font-bold text-gray-900 mb-4">
          TaskFlow
        </h1>
        <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
          منصة إدارة مشاريع تعاونية مبنية بـ Next.js 16.
          خطط وتتبع وسلّم المشاريع معًا.
        </p>
        <div className="flex gap-4 justify-center">
          <Link
            href="/login"
            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          >
            ابدأ الآن
          </Link>
          <Link
            href="/about"
            className="px-6 py-3 border border-gray-300 rounded-lg hover:bg-gray-50"
          >
            اعرف المزيد
          </Link>
        </div>
        <div className="mt-16 grid grid-cols-3 gap-8 max-w-3xl mx-auto">
          <div className="p-6 bg-white rounded-xl shadow-sm">
            <h3 className="font-bold text-lg">خطط</h3>
            <p className="text-gray-500 mt-2">أنشئ مشاريع وعيّن مهامًا</p>
          </div>
          <div className="p-6 bg-white rounded-xl shadow-sm">
            <h3 className="font-bold text-lg">تتبع</h3>
            <p className="text-gray-500 mt-2">راقب التقدم في الوقت الفعلي</p>
          </div>
          <div className="p-6 bg-white rounded-xl shadow-sm">
            <h3 className="font-bold text-lg">سلّم</h3>
            <p className="text-gray-500 mt-2">سلّم المشاريع في الموعد المحدد</p>
          </div>
        </div>
      </div>
    </div>
  );
}

في المتصفح http://localhost:3000 ترى:

[عنوان TaskFlow]
منصة إدارة مشاريع تعاونية مبنية بـ Next.js 16.
خطط وتتبع وسلّم المشاريع معًا.

[ابدأ الآن] [اعرف المزيد]

┌──────┐  ┌──────┐  ┌──────┐
│ خطط  │  │ تتبع │  │ سلّم │
└──────┘  └──────┘  └──────┘