npx create-next-app@latest my-next-app

? 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? No
? Would you like to use App Router? Yes
? Would you like to customize the default import alias? No

my-next-app/
├── app/              // دليل التطبيق الرئيسي في نظام App Router
│   ├── favicon.ico   // أيقونة الموقع
│   ├── globals.css   // ملف CSS عام للتطبيق
│   ├── layout.tsx    // تخطيط الصفحات الرئيسي
│   └── page.tsx      // صفحة الرئيسية
├── public/           // ملفات الوسائط والملفات الثابتة
├── node_modules/     // حزم npm المثبتة
├── .eslintrc.json   // إعدادات ESLint
├── .gitignore       // قائمة الملفات التي يتم تجاهلها في Git
├── next.config.js   // ملف إعدادات Next.js
├── package.json     // إعدادات المشروع والتبعيات
├── postcss.config.js // إعدادات PostCSS (لـ Tailwind)
├── README.md        // توثيق المشروع
├── tailwind.config.js // إعدادات Tailwind CSS
└── tsconfig.json    // إعدادات TypeScript

cd my-next-app
npm run dev

// app/about/page.tsx

export default function AboutPage() {
  return (
    <div className="container mx-auto py-8">
      <h1 className="text-3xl font-bold">عن الموقع</h1>
      <p className="mt-4">هذه هي صفحة معلومات عن الموقع.</p>
    </div>
  );
}

// app/products/[id]/page.tsx

export default function ProductPage({ params }) {
  // params.id يحتوي على قيمة المعامل من عنوان URL
  return (
    <div>
      <h1>المنتج: {params.id}</h1>
    </div>
  );
}

// app/blog/layout.tsx

export default function BlogLayout({ children }) {
  return (
    <div className="blog-container">
      <nav className="blog-sidebar">
        <h3>أقسام المدونة</h3>
        <ul>
          <li><a href="/blog/tech">تقنية</a></li>
          <li><a href="/blog/design">تصميم</a></li>
        </ul>
      </nav>
      
      <main className="blog-content">
        {children}
      </main>
    </div>
  );
}

// مثال للتنقل بين الصفحات

import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">الرئيسية</Link>
        </li>
        <li>
          <Link href="/about">عن الموقع</Link>
        </li>
        <li>
          <Link href={`/blog/${postId}`}>مقالة معينة</Link>
        </li>
      </ul>
    </nav>
  );
}

// هذا مكون خادم افتراضي
async function UserProfile({ userId }) {
  // استرجاع بيانات من قاعدة البيانات مباشرة (لا يمكن القيام بذلك في مكونات العميل)
  const user = await db.user.findUnique({ where: { id: userId } });
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

"use client" // هذا التوجيه يخبر Next.js أن هذا مكون عميل

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>العدد الحالي: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        زيادة
      </button>
    </div>
  );
}

// ArticlePage.js - مكون خادم
import LikeButton from './LikeButton'; // مكون عميل

async function getArticle(id) {
  const res = await fetch(`https://api.example.com/articles/${id}`);
  return res.json();
}

export default async function ArticlePage({ params }) {
  const article = await getArticle(params.id);
  
  return (
    <article>
      <h1>{article.title}</h1>
      <p>{article.content}</p>
      <LikeButton articleId={article.id} /> // استخدام مكون عميل
    </article>
  );
}

"use client" // LikeButton.js - مكون عميل

import { useState } from 'react';

export default function LikeButton({ articleId }) {
  const [likes, setLikes] = useState(0);
  const [isLiked, setIsLiked] = useState(false);
  
  function handleLike() {
    if (isLiked) {
      setLikes(likes - 1);
      setIsLiked(false);
    } else {
      setLikes(likes + 1);
      setIsLiked(true);
    }
    
    // يمكن هنا إرسال طلب للخادم لتحديث عدد الإعجابات
  }
  
  return (
    <button
      onClick={handleLike}
      className={`btn ${isLiked ? 'btn-liked' : ''}`}
    >
      {isLiked ? 'إلغاء الإعجاب' : 'إعجاب'} ({likes})
    </button>
  );
}

// app/users/page.tsx

async function getUsers() {
  const res = await fetch('https://api.example.com/users');
  if (!res.ok) {
    throw new Error('فشل في استرجاع المستخدمين');
  }
  return res.json();
}

export default async function UsersPage() {
  const users = await getUsers();
  
  return (
    <div>
      <h1>المستخدمون</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

// استرجاع بيانات مع تخزين مؤقت (افتراضي)
const staticData = await fetch('https://api.example.com/static-data');

// استرجاع بيانات جديدة في كل طلب (بدون تخزين مؤقت)
const dynamicData = await fetch('https://api.example.com/dynamic-data', { cache: 'no-store' });

// استرجاع بيانات مع تخزين مؤقت لمدة 10 ثوان
const revalidatedData = await fetch('https://api.example.com/data', { 
  next: { revalidate: 10 } 
});

"use client"

import { useState, useEffect } from 'react';

export default function ClientFetching() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    async function fetchData() {
      try {
        const res = await fetch('https://api.example.com/data');
        const jsonData = await res.json();
        setData(jsonData);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    }
    
    fetchData();
  }, []);
  
  if (isLoading) return <p>جاري التحميل...</p>;
  if (error) return <p>حدث خطأ: {error}</p>;
  
  return (
    <div>
      <h1>البيانات</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

"use client"

import useSWR from 'swr';

const fetcher = async (url) => {
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error('فشل في استرجاع البيانات');
  }
  return res.json();
};

export default function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher);
  
  if (isLoading) return <p>جاري التحميل...</p>;
  if (error) return <p>حدث خطأ</p>;
  
  return (
    <div>
      <h1>مرحباً {data.name}!</h1>
    </div>
  );
}

// app/api/users/route.ts

export async function GET() {
  const users = [
    { id: 1, name: 'أحمد' },
    { id: 2, name: 'محمد' },
    { id: 3, name: 'سارة' },
  ];

  return Response.json(users);
}

export async function POST(request) {
  const data = await request.json();
  
  // التحقق من صحة البيانات والمعالجة
  if (!data.name) {
    return Response.json(
      { error: 'اسم المستخدم مطلوب' },
      { status: 400 }
    );
  }
  
  // إضافة مستخدم جديد (في حالة حقيقية سيكون في قاعدة بيانات)
  const newUser = { id: 4, name: data.name };
  
  return Response.json(newUser, { status: 201 });
}

// app/api/users/[id]/route.ts

export async function GET(request, { params }) {
  const userId = params.id;
  
  // استرجاع المستخدم حسب المعرف (مثال)
  const user = { id: userId, name: `المستخدم ${userId}` };
  
  return Response.json(user);
}

export async function DELETE(request, { params }) {
  const userId = params.id;
  
  // حذف المستخدم (في حالة حقيقية)
  // await db.user.delete({ where: { id: userId } });
  
  return Response.json({ message: `تم حذف المستخدم ${userId} بنجاح` });
}

// app/api/login/route.ts

import { cookies } from 'next/headers';
import { sign } from 'jsonwebtoken';

export async function POST(request) {
  const { email, password } = await request.json();
  
  // التحقق من بيانات المستخدم (مثال)
  if (email === '[email protected]' && password === 'password123') {
    // إنشاء توكن JWT
    const token = sign(
      { id: 1, email },
      process.env.JWT_SECRET,
      { expiresIn: '1h' }
    );
    
    // وضع التوكن في كوكيز
    cookies().set('token', token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      maxAge: 3600, // ساعة واحدة
      path: '/',
    });
    
    return Response.json({ success: true });
  }
  
  return Response.json(
    { error: 'بيانات غير صحيحة' },
    { status: 401 }
  );
}

// app/layout.tsx

import './globals.css';

export default function RootLayout({
  children,
}) {
  return (
    <html lang="ar" dir="rtl">
      <body>{children}</body>
    </html>
  );
}

// styles/Button.module.css

.button {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.2s;
}

.primary {
  background-color: #FF4C29;
  color: white;
}

.secondary {
  background-color: #2C394B;
  color: white;
}

// components/Button.js

import styles from '../styles/Button.module.css';

export default function Button({ children, variant = 'primary', onClick }) {
  return (
    <button
      className={`${styles.button} ${styles[variant]}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

// تثبيت Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        // إضافة ألوان مخصصة
        primary: '#FF4C29',
        secondary: '#2C394B',
      },
    },
  },
  plugins: [],
}

// مثال لاستخدام Tailwind CSS

export default function Card({ title, description }) {
  return (
    <div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
      <h2 className="text-xl font-bold text-gray-900 mb-2">{title}</h2>
      <p className="text-gray-600">{description}</p>
    </div>
  );
}

// مثال باستخدام styled-components (مع توجيه "use client")
"use client"

import styled from 'styled-components';

const Button = styled.button`
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  background-color: ${props => props.primary ? '#FF4C29' : '#2C394B'};
  color: white;
  transition: all 0.2s;
  
  &:hover {
    opacity: 0.9;
  }
`;

export default function StyledButton({ children, primary, onClick }) {
  return (
    <Button primary={primary} onClick={onClick}>
      {children}
    </Button>
  );
}

import Image from 'next/image';

export default function ProfileImage() {
  return (
    <Image
      src="/images/profile.jpg"
      alt="صورة الملف الشخصي"
      width={300}
      height={300}
      priority
    />
  );
}

import dynamic from 'next/dynamic';

// استيراد المكون ديناميكيًا (يتم تحميله فقط عند الحاجة)
const DynamicChart = dynamic(() => import('../components/Chart'), {
  loading: () => <p>جاري تحميل الرسم البياني...</p>,
  ssr: false, // للمكونات التي تعتمد على متصفح فقط
});

export default function Dashboard() {
  return (
    <div>
      <h1>لوحة التحكم</h1>
      <DynamicChart data={chartData} />
    </div>
  );
}

import { Inter } from 'next/font/google';

// تكوين الخط
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

export default function RootLayout({ children }) {
  return (
    <html lang="ar" dir="rtl" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

// app/page.tsx

import { Metadata } from 'next';

// تكوين بيانات التعريف للصفحة
export const metadata: Metadata = {
  title: 'الصفحة الرئيسية | اسم المشروع',
  description: 'وصف الصفحة الرئيسية',
  openGraph: {
    title: 'اسم المشروع',
    description: 'وصف المشروع',
    images: ['/images/og-image.jpg'],
  },
};

export default function Home() {
  return (
    <main>
      // محتوى الصفحة
    </main>
  );
}

// بناء التطبيق للإنتاج
npm run build

// اختبار البناء محليًا
npm start