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

As an app grows, the App Router lets you structure folders for shared UI without affecting the URL. Route groups and nested layouts are the main tools.

Each folder can have a layout.tsx. Layouts nest: a section layout wraps its pages while the root layout wraps everything.

Wrapping a folder name in parentheses, like (marketing), creates a route group. It organizes files but is omitted from the URL.

Route groups let you have different top-level layouts — for example, one for marketing pages and another for the app — by giving each group its own layout.

Because (marketing) does not appear in the path, app/(marketing)/page.tsx still serves the URL /, not /marketing.

A template.tsx is like a layout but creates a new instance on every navigation, resetting state — useful for enter animations or per-route effects.

Use a template when you need state or effects to re-run on each navigation; use a layout when you want shared UI and state to persist across navigations.

You can also use route groups purely to colocate related routes under one folder without adding a URL segment, keeping the codebase tidy.

Put navigation, sidebars, and providers in the nearest layout so they persist and avoid re-rendering on navigation within that section.

Each segment, including grouped ones, can have its own loading.tsx and error.tsx, scoping fallback UI precisely.

A typical app: a (marketing) group with a public layout, an (app) group with an authenticated layout, each nesting further section layouts.

You learned to structure apps with nested layouts for persistent shared UI, route groups (name) that organize without changing URLs and allow multiple root layouts, and templates that remount on navigation.