دليل Next.js 15 App Router الشامل — أفضل ممارسات Server Components

يمثل App Router في Next.js 15 نموذجا جديدا يتمحور حول React Server Components. فيما يلي ملخص لأفضل الممارسات المثبتة في بيئات الإنتاج حتى عام 2026.

الإجابة المختصرة: تم تنظيم أفضل ممارسات Server Components في Next.js 15 بناء على مشهد عام 2026.

1. بنية نظام الملفات

app/
  layout.tsx

# 루트 레이아웃 (필수)
  page.tsx

# 홈 /
  loading.tsx

# 로딩 UI
  error.tsx

# 에러 경계
  not-found.tsx

# 404
  (marketing)/

# 라우트 그룹 (URL 영향 X)
    page.tsx
  blog/
    [slug]/
      page.tsx

# /blog/xxx
  api/
    route.ts

# REST 엔드포인트

مجموعات المسارات (group): استخدمها لمشاركة التخطيطات من دون التأثير في عنوان URL.

2. Server Components مقابل Client Components

Server هو الوضع الافتراضي. يعامل المكون على أنه Client Component فقط عند التصريح صراحة بعبارة "use client".

// Server Component (default)
async function Page() {
  const user = await fetchUser()  // 서버에서 직접 가져옵니다.
  return <ProfileCard user={user} />
}

// Client Component
"use client"
function InteractiveButton() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

مبادئ الحدود

• ضع "use client" عند أدنى ورقة ممكنة.
• أبق المستويات العليا على هيئة server components.
• يجب أن تكون القيم الممررة كخصائص قابلة للتسلسل (أنواع متوافقة مع JSON فقط).

3. جلب البيانات

// 병렬 페칭
async function Page({ params }) {
  const [user, posts] = await Promise.all([
    fetchUser(params.id),
    fetchPosts(params.id),
  ])
  return <Dashboard user={user} posts={posts} />
}

التخزين المؤقت التلقائي في fetch:

• fetch(url) — يستخدم ذاكرة التخزين المؤقت الافتراضية
• fetch(url, { cache: "no-store" }) — يحدث البيانات مع كل طلب
• fetch(url, { next: { revalidate: 60 } }) — ISR كل 60 ثانية

4. Suspense + Streaming

import { Suspense } from "react"

export default function Page() {
  return (
    <>
      <FastSection />
      <Suspense fallback={<Skeleton />}>
        <SlowSection />
      </Suspense>
    </>
  )
}

async function SlowSection() {
  await new Promise(r => setTimeout(r, 2000))
  return <div>Done</div>
}

يتم بث المنطقة البطيئة فقط، لذلك يصبح TTFB متاحا فورا.

5. Server Actions

// app/actions.ts
"use server"
export async function createPost(formData: FormData) {
  const title = formData.get("title") as string
  await db.insert(posts).values({ title })
  revalidatePath("/blog")
}

// app/blog/new/page.tsx
import { createPost } from "../actions"
export default function NewPost() {
  return <form action={createPost}>...</form>
}

يمكنك استدعاء منطق الخادم مباشرة من دون REST API، وتتم معالجة حماية CSRF تلقائيا.

6. حدود الأخطاء

// app/blog/error.tsx
"use client"
export default function Error({ error, reset }) {
  return (
    <div>
      <p>{error.message}</p>
      <button onClick={reset}>Retry</button>
    </div>
  )
}

هذه حدود أخطاء على مستوى المقطع، لذلك يستمر باقي الصفحة في العمل حتى عند حدوث خطأ.

7. البيانات الوصفية و SEO

export const metadata = {
  title: "My Page",
  description: "...",
}

// 또는 동적으로 설정
export async function generateMetadata({ params }) {
  const post = await fetchPost(params.slug)
  return { title: post.title }
}

أفضل 10 ممارسات

1. 1Server افتراضيا: استخدم "use client" فقط عندما تكون ضرورية فعلا
2. 2اجلب البيانات من أعلى مستوى ممكن: تجنب تمرير الخصائص عبر طبقات كثيرة
3. 3استخدم Suspense بنشاط: عزز TTFB إلى أقصى حد عبر البث
4. 4fetch + revalidate: تخزين مؤقت تلقائي من دون Redis
5. 5Server Actions: استبدل REST وقلل الشيفرة المتكررة
6. 6dynamic = force-dynamic: استخدمه فقط للصفحات المخصصة لكل مستخدم
7. 7تحسين الصور: مكون أساسي
8. 8تحسين الخطوط: استخدم next/font
9. 9import server-only: امنع تسرب الشيفرة الحساسة إلى العميل
10. 10Parallel Routes: استخدم @slot للوحات المعلومات المعقدة

أخطاء شائعة

• استخدام useState في server component → يسبب خطأ
• استخدام fetch في Client component → يضر الأداء (الجلب على الخادم أفضل)
• تمرير الدوال أو قيم Date عبر الخصائص → يسبب أخطاء في التسلسل
• استيراد async server component من ملف يحتوي "use client" → يسبب التباسا

💡 رؤى عملية

تتوقف كثير من المقالات عند نصائح عامة مثل "App Router جيد، استخدم Server Components"، لكن في بيئات الإنتاج الكورية يعد توافق Cloudflare Pages و Vercel Edge runtime عاملا حاسما في القرار. بعد تشغيل 18 موقع أدوات (MillionsCode) باستخدام OpenNext لمدة ستة أشهر، وجدت أن وضع export const runtime = 'edge' في RootLayout أو في المسار الخطأ يسبب شاشة بيضاء فورا، لذلك فإن أفضل نهج هو تركه فارغا والسماح لـ OpenNext بمعالجته تلقائيا. بناء على اتجاهات npm في 2024، تجاوز تبني App Router استخدام Pages Router (67% مقابل 33%)، لكن الخدمات الكورية الكبيرة مثل Toss و Daangn Market ما زالت تنتقل تدريجيا. للمشاريع الجديدة، أوصي بقوة باستخدام App Router؛ أما التطبيقات القديمة، فالأكثر واقعية هو إدخاله تدريجيا مسارا بعد آخر. مشكلة متكررة أخرى في الفرق الكورية هي فشل البناء بسبب محاولة استدعاء headers() أو cookies() داخل مكونات "use client". يتم حل ذلك فورا بتمرير القيم كخصائص من server component. توفر Server Actions حماية CSRF تلقائية قوية، لكن عند استقبال callbacks لمدفوعات Toss Payments أو KCP داخل شبكة إدارة داخلية، ستظل بحاجة إلى مسار webhook منفصل. وقد تحققت شخصيا من أن Suspense + Streaming خفض متوسط TTFB من 800ms إلى 220ms في بيئة 4G على الهاتف المحمول.

الخاتمة

لدى App Router منحنى تعلم أولي، لكنه بعد إتقانه يوفر تجربة تطوير تمنحك أفضل ما في SPA + SSR. في أي مشروع Next.js جديد في 2026، يجب أن يكون App Router هو الخيار الافتراضي. أما Pages Router فأصبح الآن شيئا ينبغي الانتقال بعيدا عنه.

المرجع: Cloudflare Developer Docs

الأسئلة الشائعة (FAQ)

Q1. ما الذي تغير في Next.js 15 App Router؟

A: أصبحت بنية app تتمحور الآن حول Server Components، والتخطيطات المتداخلة، والبث، وذاكرة تخزين البيانات المؤقتة.

Q2. هل يجب أن أستخدم App Router أم Pages Router؟

A: App Router هو الخيار الافتراضي للمشاريع الجديدة، بينما من الأفضل ترحيل الخدمات الحالية تدريجيا حسب المسار.

Q3. ما أفضل ممارسات Server Components؟

A: اجعل server components هي الوضع الافتراضي، وافصل الأجزاء التفاعلية فقط إلى client components.

Q4. كيف ينبغي التعامل مع جلب البيانات في Next.js App Router؟

A: اجلب البيانات مباشرة داخل server components، وحدد بوضوح التخزين المؤقت، وإعادة التحقق، وحدود Suspense.

Q5. ما المشكلات الشائعة أثناء الترحيل إلى App Router؟

A: تشمل المشكلات الشائعة مواضع استخدام client hooks، والحالة العامة، والبيانات الوصفية، وسلوك التخزين المؤقت، والتغييرات في بنية التوجيه.

Q6. ما مفتاح تحسين الأداء في Next.js 15؟

A: اضبط حدود التصيير على الخادم، وتحسين الصور، واستراتيجية التخزين المؤقت، وتحليل الحزم، وتجربة البث معا.