أكواد React و Next.js الأساسية 2026

React وNext.js يقودان تطوير الويب في 2026. هذه أكواد أساسية للاثنين.

React 19 Hooks الأساسية

useState

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <button onClick={() => setCount(c => c - 1)}>-</button>
    </div>
  );
}

useEffect

import { useState, useEffect } from "react";

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const controller = new AbortController();
    
    fetch(`/api/users/${userId}`, { signal: controller.signal })
      .then(r => r.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
    
    return () => controller.abort(); // Cleanup
  }, [userId]);
  
  if (loading) return <p>جاري التحميل...</p>;
  return <div>{user.name}</div>;
}

useReducer

import { useReducer } from "react";

const initialState = { count: 0, step: 1 };

function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT": return {...state, count: state.count + state.step };
    case "DECREMENT": return {...state, count: state.count - state.step };
    case "SET_STEP": return {...state, step: action.step };
    case "RESET": return initialState;
    default: return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <div>
      <p>Count: {state.count}, Step: {state.step}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
    </div>
  );
}

useContext

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) throw new Error("useTheme must be used within ThemeProvider");
  return context;
}

// استخدام
function Header() {
  const { theme, setTheme } = useTheme();
  return (
    <button onClick={() => setTheme(t => t === "light" ? "dark": "light")}>
      {theme}
    </button>
  );
}

useMemo & useCallback

import { useMemo, useCallback, useState } from "react";

function ExpensiveList({ items, filter }) {
  // useMemo: احفظ نتيجة حساب مكلف
  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]);
  
  // useCallback: احفظ الدالّة نفسها
  const handleClick = useCallback((id) => {
    console.log("Clicked:", id);
  }, []);
  
  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id} onClick={() => handleClick(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}

Custom Hook

import { useState, useEffect } from "react";

// Hook مخصّص لـfetch
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(r => r.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);
  
  return { data, loading, error };
}

// استخدام
function Users() {
  const { data, loading, error } = useFetch("/api/users");
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

React 19 Features

useOptimistic

import { useOptimistic } from "react";

function TodoList({ todos, addTodo }) {
  const [optimisticTodos, addOptimistic] = useOptimistic(
    todos,
    (state, newTodo) => [...state, {...newTodo, sending: true }]
  );
  
  async function submit(formData) {
    const newTodo = { id: Math.random(), text: formData.get("text") };
    addOptimistic(newTodo);
    await addTodo(newTodo); // API call
  }
  
  return (
    <>
      <form action={submit}>
        <input name="text" />
        <button>Add</button>
      </form>
      <ul>
        {optimisticTodos.map(todo => (
          <li key={todo.id} style={{ opacity: todo.sending ? 0.5: 1 }}>
            {todo.text}
          </li>
        ))}
      </ul>
    </>
  );
}

use() Hook

import { use, Suspense } from "react";

function UserProfile({ userPromise }) {
  const user = use(userPromise); // ينتظر الـPromise
  return <div>{user.name}</div>;
}

// Parent
function App() {
  const userPromise = fetchUser();
  
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  );
}

Next.js 16 (App Router)

بنية المشروع

app/
├── layout.tsx # Root layout
├── page.tsx # /
├── about/
│ └── page.tsx # /about
├── blog/
│ ├── page.tsx # /blog
│ └── [slug]/
│ └── page.tsx # /blog/:slug
├── api/
│ └── users/
│ └── route.ts # /api/users
└── globals.css

Server Component (افتراضي)

// app/users/page.tsx
export default async function UsersPage() {
  const users = await fetch("https://api.example.com/users").then(r => r.json());
  
  return (
    <div>
      <h1>المستخدمون</h1>
      <ul>
        {users.map(u => <li key={u.id}>{u.name}</li>)}
      </ul>
    </div>
  );
}

Client Component

"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Route Handler (API)

// app/api/users/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const country = searchParams.get("country");
  
  const users = await fetchUsers({ country });
  return NextResponse.json(users);
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  const user = await createUser(body);
  return NextResponse.json(user, { status: 201 });
}

Dynamic Routes

// app/blog/[slug]/page.tsx
export default async function BlogPost({ 
  params 
}: { 
  params: Promise<{ slug: string }> 
}) {
  const { slug } = await params;
  const post = await getPost(slug);
  
  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

// SSG
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map(p => ({ slug: p.slug }));
}

// Metadata
export async function generateMetadata({ params }) {
  const post = await getPost((await params).slug);
  return {
    title: post.title,
    description: post.description
  };
}

Server Actions

// app/actions.ts
"use server";

export async function createTodo(formData: FormData) {
  const text = formData.get("text");
  await db.todo.create({ data: { text } });
  revalidatePath("/todos");
}

// app/todos/page.tsx
import { createTodo } from "@/app/actions";

export default function TodosPage() {
  return (
    <form action={createTodo}>
      <input name="text" />
      <button>Add</button>
    </form>
  );
}

Layout

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <nav>...</nav>
        {children}
        <footer>...</footer>
      </body>
    </html>
  );
}

Loading & Error

// app/users/loading.tsx
export default function Loading() {
  return <p>جاري التحميل...</p>;
}

// app/users/error.tsx
"use client";
export default function Error({ error, reset }) {
  return (
    <div>
      <h2>حدث خطأ!</h2>
      <button onClick={reset}>حاول مجدّداً</button>
    </div>
  );
}

نصائح ذهبية

1. Server Components افتراضياً، لا تضف use client إلا للحاجة
2. Fetch في Server Components، بلا useEffect
3. TypeScript دائماً للمشاريع الجادّة
4. App Router بدل Pages، الحديث والأفضل
5. Server Actions للـForms، تجنّب API routes لكل شيء
6. Image من next/image، تحسين تلقائي

المصادر الرسمية

• React Documentation
• Next.js Documentation
• React Compiler

---

اقرأ أيضاً: أكواد JavaScript الأساسية · أكواد HTML و CSS · أكواد أتمتة يومية · أفضل ١٠ أكواد Python