Next.js: The React Framework (App Router)Entry 3 of 16

File-Based Routing: Pages and Layouts

Folders inside app/ define URL segments. A page.tsx makes a segment reachable; a layout.tsx wraps it and every child segment.

nextjs.orgpage.js layout.js

Notes

app/├── layout.tsx          → wraps every page (required root layout)├── page.tsx            → /├── about/│   └── page.tsx        → /about├── (marketing)/        → route group: organizes files, not in the URL│   └── pricing/│       └── page.tsx    → /pricing└── dashboard/    ├── layout.tsx      → wraps /dashboard and everything under it    ├── page.tsx        → /dashboard    └── settings/        └── page.tsx    → /dashboard/settings

Layouts persist across navigation. Their state survives when the user moves between child pages.
template.tsx is a layout that remounts on every navigation, resetting its state.
Route groups (name) group files or give sections different layouts without affecting the URL.
Files other than the special names (page, layout, loading, error, not-found, route) are ignored by the router, so components can live next to the pages that use them.

What / Why / When

What: Routing defined by folders and special file names.
Why: No route configuration to keep in sync; layouts nest automatically.
When: Every Next.js App Router project.
Use case: A dashboard with a shared sidebar layout.

Code compare

Next.js

// app/layout.tsxexport default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>{children}</body>    </html>  );}

Routes are declared in code. A parent route's component renders its children in a <router-outlet>:

Angular

// app.routes.tsimport { Routes } from "@angular/router";export const routes: Routes = [  { path: "", loadComponent: () => import("./home/home.component").then((m) => m.HomeComponent) },  {    path: "about",    loadComponent: () => import("./about/about.component").then((m) => m.AboutComponent),  },  {    path: "dashboard",    loadComponent: () =>      import("./dashboard/dashboard-layout.component").then((m) => m.DashboardLayoutComponent),    children: [      {        path: "",        loadComponent: () =>          import("./dashboard/overview.component").then((m) => m.OverviewComponent),      },      {        path: "settings",        loadComponent: () =>          import("./dashboard/settings.component").then((m) => m.SettingsComponent),      },    ],  },];

Differences and gotchas

layout.tsx = parent route component with <router-outlet>. page.tsx = the leaf route's component.
A route group = a componentless parent route with path: ''.
Both lazy-load by default in practice: Next.js splits per route automatically; Angular splits per loadComponent.

Quick reference

Next.js	Angular
`app/about/page.tsx`	`{ path: 'about', loadComponent: … }`
`layout.tsx` + `{children}`	Parent route + `<router-outlet />`
`template.tsx`	No direct equivalent
`(group)` folder	Componentless route with `path: ''`