PricingLoginStart free
Next.js 15 Fullstack (App Router + Server Actions) · درس

نظرة عامة على الصفحات والتخطيطات

استكشف الفرق بين الصفحات والتخطيطات وكيفية جمعهما لتشكيل بنية واجهة المستخدم في تطبيق Next.js

الدرس 3 من 412 خطوة

نظرة عامة على الصفحات والتخطيطات درس مجاني في Next.js 15 Fullstack (App Router + Server Actions) على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack (App Router + Server Actions)، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack (App Router + Server Actions) 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Welcome to Pages & Layouts

Next.js UI rests on two ideas: Pages and Layouts. This lesson shows what each one is and how they combine to build your interface.

What is a Page?

A Page is a React component that renders the UI for one route. Default-export it from a page.js file and that route gets its own view.

Creating a Simple Page

Here's a basic page.js that renders the home route /. A page is just a default-exported component — nothing more.

// app/page.js

export default function HomePage() {
  return (
    <h1>Welcome to My App!</h1>
  );
}

What is a Layout?

A Layout is UI shared across pages — a wrapper that gives consistent structure. Export it from layout.js; it takes a children prop for nested content.

The Root Layout

Every App Router app needs a root layout at app/layout.js. It wraps the whole app, including the html and body tags — the place for global styles and metadata.

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

Nested Layouts

Add a layout.js inside any folder for a nested layout. An app/dashboard/layout.js wraps every page under dashboard — unique shared UI per section.

How They Combine

Next.js nests layouts automatically: a page renders inside its parent layout's children, that inside its parent's, all the way up to the root.

Example: A Blog Section

Picture a blog: blog/layout.js gives a shared nav, blog/page.js is the index, and blog/first-post/page.js a post — each nesting upward into the root.

Code: Blog Layout Example

This blog/layout.js wraps every /blog page with a header, nav, and footer — shared chrome that stays consistent across the section.

// app/blog/layout.js

export default function BlogLayout({ children }) {
  return (
    <div>
      <header><h1>My Awesome Blog</h1></header>
      <nav>
        <a href="/blog">Home</a> | <a href="/blog/archive">Archive</a>
      </nav>
      <main>{children}</main>
      <footer><p>&copy; 2023 CoddyKit Blog</p></footer>
    </div>
  );
}

Code: Blog Page Example

And here's blog/page.js. Its content renders right where {children} sits inside BlogLayout — page slotting into layout.

// app/blog/page.js

export default function BlogHomePage() {
  return (
    <section>
      <h2>Welcome to the Blog Homepage!</h2>
      <p>Discover our latest articles and insights.</p>
    </section>
  );
}

Pages vs. Layouts Quiz

Let's check your understanding of Next.js pages and layouts.

أجب عليها في الدرس التفاعلي

Recap: Pages & Layouts

Recap: Pages (page.js) render a route's unique UI, Layouts (layout.js) share UI across routes, and Next.js nests them via children.

البدء مجانًا

تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات
22
الدروس
88
ابدأ التعلم مجانًاعرض الدورة الكاملة

الأسئلة الشائعة

هل درس «نظرة عامة على الصفحات والتخطيطات» مجاني؟

نعم — نص درس «نظرة عامة على الصفحات والتخطيطات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack (App Router + Server Actions)، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack (App Router + Server Actions) 4 دروس في المجموع.

ماذا ستتعلم في «نظرة عامة على الصفحات والتخطيطات»؟

استكشف الفرق بين الصفحات والتخطيطات وكيفية جمعهما لتشكيل بنية واجهة المستخدم في تطبيق Next.js تتمرن على Next.js 15 Fullstack (App Router + Server Actions) مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack (App Router + Server Actions)؟

لا تُشترط خبرة سابقة. Next.js 15 Fullstack (App Router + Server Actions) على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «نظرة عامة على الصفحات والتخطيطات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack (App Router + Server Actions) هذا؟

نعم. كل درس في Next.js 15 Fullstack (App Router + Server Actions) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. إعداد المشروع وCLI
  2. أساسيات التوجيه المعتمد على نظام الملفات
  3. نظرة عامة على الصفحات والتخطيطات
  4. تنسيق تطبيق Next.js الخاص بك
← العودة إلى Next.js 15 Fullstack (App Router + Server Actions)