0Pricing
Next.js 15 Fullstack Web Apps · Lekcja

Zagnieżdżone układy i grupy tras

Organizuj aplikację za pomocą zagnieżdżonych układów i grupuj trasy, aby zwiększyć modularność.

Zagnieżdżone układy i grupy tras to bezpłatna lekcja Next.js 15 Fullstack Web Apps na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Next.js 15 Fullstack Web Apps, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Next.js 15 Fullstack Web Apps zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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!

Często zadawane pytania

Czy lekcja „Zagnieżdżone układy i grupy tras” jest bezpłatna?

Tak — pełny tekst „Zagnieżdżone układy i grupy tras” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Next.js 15 Fullstack Web Apps, przejdź na CoddyKit PRO. Kurs Next.js 15 Fullstack Web Apps zawiera 4 lekcji w sumie.

Co nauczysz się w „Zagnieżdżone układy i grupy tras”?

Organizuj aplikację za pomocą zagnieżdżonych układów i grupuj trasy, aby zwiększyć modularność. Ćwiczysz Next.js 15 Fullstack Web Apps z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Next.js 15 Fullstack Web Apps?

Nie wymagamy żadnego doświadczenia. Next.js 15 Fullstack Web Apps w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Zagnieżdżone układy i grupy tras”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Next.js 15 Fullstack Web Apps?

Tak. Każda lekcja Next.js 15 Fullstack Web Apps zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Trasy dynamiczne i segmenty catch-all
  2. Zagnieżdżone układy i grupy tras
  3. Trasy równoległe i przechwytujące
  4. Konwencje interfejsów ładowania i błędów
← Powrót do Next.js 15 Fullstack Web Apps