0Pricing
Next.js 15 Fullstack Web Apps · Ders

İç İçe Düzenler ve Yol Grupları

Daha iyi modülerlik için uygulamanızı iç içe düzenlerle yapılandırın ve yolları yol gruplarını kullanarak düzenleyin.

İç İçe Düzenler ve Yol Grupları, CoddyKit'te ücretsiz bir Next.js 15 Fullstack Web Apps dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Next.js 15 Fullstack Web Apps öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Nested Layouts: Shared UI

Welcome! In this lesson, we'll explore two powerful App Router features: Nested Layouts and Route Groups.

Nested layouts allow you to share UI components (like headers, sidebars, or footers) across multiple pages within a specific segment of your application. This helps maintain consistency and reduces code duplication.

How Layouts Work

In Next.js 15 App Router, layouts are defined by creating a layout.tsx file inside a folder.

  • A layout component receives a children prop, which will be the content of the nested route segments (e.g., page.tsx or other nested layouts).
  • Layouts are rendered hierarchically, meaning an outer layout wraps an inner layout.

The Root Layout

Every Next.js App Router project must have a Root Layout. This is the top-most layout.tsx file located directly in your app/ directory.

  • It defines the essential <html> and <body> tags.
  • It applies to all routes in your application.

Root Layout Code

Here's a basic example of the required root layout. Notice how it takes children as a prop.

import './globals.css';

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

Creating a Nested Layout

To create a nested layout, simply add another layout.tsx file inside a subfolder within your app/ directory.

For example, app/dashboard/layout.tsx would create a layout specific to all routes under /dashboard.

Nested Layout Code Example

This example shows a DashboardLayout that wraps its content, adding a navigation bar specific to the dashboard section. The DashboardPage will be rendered within this layout.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <section>
      <nav>
        <h1>Dashboard Nav</h1>
      </nav>
      {children}
    </section>
  );
}

// app/dashboard/page.tsx
export default function DashboardPage() {
  return (
    <div>
      <h2>Welcome to Dashboard</h2>
      <p>This content is inside the DashboardLayout.</p>
    </div>
  );
}

Introducing Route Groups

Route Groups are folders in your app/ directory that don't affect the URL path. They are primarily used for:

  • Organizing routes into logical groups.
  • Applying specific layouts to a subset of routes without changing the URL.

You define a route group by wrapping the folder name in parentheses, like (groupName).

Why Use Route Groups?

Route groups are incredibly useful for:

  • Separate Layouts: Easily apply a unique layout to a specific group of pages (e.g., an (auth) group with a login layout).
  • Project Organization: Keep related routes together for better maintainability.
  • Excluding Segments: Prevent a folder name from appearing in the URL path.

Route Group Layout Example

Here, a (marketing) route group contains its own layout. Any page within this group (like /about) will use this layout, but the URL remains /about, not /marketing/about.

// app/(marketing)/layout.tsx
export default function MarketingLayout({ children }) {
  return (
    <>
      <header>
        <h1>Marketing Site</h1>
      </header>
      <main>
        {children}
      </main>
      <footer>
        <p>&copy; 2024 Marketing</p>
      </footer>
    </>
  );
}

// app/(marketing)/about/page.tsx
export default function AboutPage() {
  return (
    <div>
      <h2>About Us</h2>
      <p>Learn more about our company.</p>
    </div>
  );
}

Layouts & Groups Check

Consider the following Next.js App Router structure:

app/
├── layout.tsx
├── dashboard/
│   ├── layout.tsx
│   └── settings/
│       └── page.tsx
└── (auth)/
    └── login/
        └── page.tsx

Which layout.tsx files would apply to the app/dashboard/settings/page.tsx route?

Recap: Layouts & Groups

You've learned about structuring your Next.js application using Nested Layouts and Route Groups!

  • Nested Layouts (`layout.tsx`) allow you to share UI components across segments of your app, creating a consistent user experience.
  • Route Groups (`(folder)`) help organize your file structure and apply specific layouts to groups of routes without affecting the URL path.

These features are crucial for building scalable and maintainable Next.js applications!

Sıkça Sorulan Sorular

“İç İçe Düzenler ve Yol Grupları” dersi ücretsiz mi?

Evet — “İç İçe Düzenler ve Yol Grupları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Next.js 15 Fullstack Web Apps kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.

“İç İçe Düzenler ve Yol Grupları” dersinde ne öğreneceğim?

Daha iyi modülerlik için uygulamanızı iç içe düzenlerle yapılandırın ve yolları yol gruplarını kullanarak düzenleyin. Next.js 15 Fullstack Web Apps ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Next.js 15 Fullstack Web Apps öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Next.js 15 Fullstack Web Apps, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“İç İçe Düzenler ve Yol Grupları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Next.js 15 Fullstack Web Apps dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Next.js 15 Fullstack Web Apps dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Dinamik Yollar ve Tümünü Yakalayan Bölümler
  2. İç İçe Düzenler ve Yol Grupları
  3. Paralel ve Araya Giren Yollar
  4. Yükleme ve Hata Arayüzü Kuralları
← Next.js 15 Fullstack Web Apps Sayfasına Dön