Next.js 15 Fullstack Web Apps · レッスン

ネストしたレイアウトとルートグループ

ネストしたレイアウトでアプリケーションを構成し、ルートグループでルートを整理してモジュール性を高めます。

レッスン 2/411 ステップ

「ネストしたレイアウトとルートグループ」はCoddyKit上の無料Next.js 15 Fullstack Web Appsレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはNext.js 15 Fullstack Web Apps学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Next.js 15 Fullstack Web Appsコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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!

無料で開始

AI チューターと学ぶ TypeScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 12
レッスン: 48

無料で学習を始めるコース全体を表示

よくある質問

「ネストしたレイアウトとルートグループ」レッスンは無料ですか？

はい。「ネストしたレイアウトとルートグループ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack Web Appsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack Web Appsコースには全4レッスンが含まれています。

「ネストしたレイアウトとルートグループ」で何を学びますか？

ネストしたレイアウトでアプリケーションを構成し、ルートグループでルートを整理してモジュール性を高めます。ブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack Web Appsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Next.js 15 Fullstack Web Appsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack Web Appsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「ネストしたレイアウトとルートグループ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このNext.js 15 Fullstack Web Appsレッスンでコードを書いて実行できますか？

はい。すべてのNext.js 15 Fullstack Web Appsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Next.js 15 Fullstack Web Appsに戻る