Next.js 15 Fullstack Web Apps · درس

أساسيات الصفحات والتنسيقات والتوجيه

استكشف App Router، وعرّف الصفحات، وأنشئ تنسيقات مشتركة، وتنقّل بين المسارات في تطبيقك.

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

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

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

Welcome to App Router

The App Router is Next.js 15's routing system, built on React Server Components. It lets you co-locate components, styles, and tests by route.

Routes from Your Files

Routing is filesystem-based: your folder structure inside app/ directly defines your URLs, keeping the project predictable.

Defining a Page

A page.js file inside a folder makes that route render. It exports the React component shown when a user visits that URL.

Code: Simple Page

Create app/page.js and it automatically becomes your home page at the / route. Here is the component that renders there.

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to CoddyKit!</h1>
      <p>This is your Next.js home page.</p>
    </div>
  );
}

Organizing with Nested Routes

Build nested routes by nesting folders in app/ — each folder is a URL segment, so app/dashboard/settings/ maps to /dashboard/settings.

Code: Nested Page

To serve /dashboard/settings, create that folder path with a page.js inside. The file's component renders at that URL.

// app/dashboard/settings/page.js
export default function DashboardSettingsPage() {
  return (
    <div>
      <h2>Dashboard Settings</h2>
      <p>Manage your preferences here.</p>
    </div>
  );
}

Shared UI with Layouts

A layout (layout.js) is shared UI that wraps the pages in its segment — ideal for navbars, sidebars, and footers via the children prop.

Code: Root Layout

Every App Router project needs a root layout.js. It defines the base HTML — the <html> and <body> tags around your whole app.

// app/layout.js
import './globals.css'; // Global styles (optional)

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>Home | About</nav>
        </header>
        <main>{children}</main> {/* Page content goes here */}
        <footer>&copy; 2024 CoddyKit</footer>
      </body>
    </html>
  );
}

Nested Layouts

Nested layouts apply only to their folder and subfolders, inheriting from parent layouts — so you can build hierarchical UI per section.

Linking Between Pages

Navigate with the <Link> component from next/link. It behaves like an anchor but does client-side routing — no full page reload.

// app/page.js (example usage)
import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>Welcome!</h1>
      <p>Go to the <Link href="/about">About Us</Link> page.</p>
      <p>Or visit your <Link href="/dashboard">Dashboard</Link>.</p>
    </div>
  );
}

Routing & Layouts Check

Which of the following statements about Next.js 15 App Router are TRUE?

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

Recap: Pages, Layouts & Routing

You learned the App Router: folders define routes, page.js renders content, layout.js shares UI, and <Link> handles fast navigation.

البدء مجانًا

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

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

الدورات: 12
الدروس: 48

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

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

هل درس «أساسيات الصفحات والتنسيقات والتوجيه» مجاني؟

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

ماذا ستتعلم في «أساسيات الصفحات والتنسيقات والتوجيه»؟

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

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack Web Apps؟

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

كم من الوقت يستغرق درس «أساسيات الصفحات والتنسيقات والتوجيه»؟

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

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack Web Apps هذا؟

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

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

← العودة إلى Next.js 15 Fullstack Web Apps