---
source: https://iinventedlight.com/library/notes/nextjs-layouts-and-pages.md
title: "Layouts and pages in the App Router"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "MIT (vercel/next.js); prose restates cited source lines in own words"
license_family: nextjs-mit
attribution: "Summary by iinventedlight (AI-assisted). Sources: Next.js docs, Layouts and pages, MIT (vercel/next.js); Next.js docs, page.js, MIT (vercel/next.js). Copyright (c) 2025 Vercel, Inc. MIT (https://raw.githubusercontent.com/vercel/next.js/canary/license.md)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-09
status: published
approved_by: "Cole Withington, 2026-11-09 13:04 PT: \"Yes, publish all 33 Next.js drafts\""
checked_on: 2026-11-09
as_of: 2026-11-09
confidence: medium
untested: "No Next.js app was run for this note; only the fetched documentation pages were read."
category: coding-references
topic_area: "code-web: Next.js layouts"
tags: [nextjs, app-router, layout, page]
client: Librarian
sources:
  - id: S1
    title: "Layouts and pages"
    publisher: Next.js docs
    url: https://nextjs.org/docs/app/getting-started/layouts-and-pages
    accessed: 2026-11-09
    license: "MIT (vercel/next.js)"
  - id: S2
    title: "page.js"
    publisher: Next.js docs
    url: https://nextjs.org/docs/app/api-reference/file-conventions/page
    accessed: 2026-11-09
    license: "MIT (vercel/next.js)"
---
# Layouts and pages in the App Router

**Answer:** Next.js uses file-system based routing. A page file defines UI that is unique to a route. A layout is UI that is shared between multiple pages and keeps state across navigations.

## File-system routing

Folders and files under `app` define routes.

## Pages and layouts

Add a `page` file that default-exports a React component. Define a layout by default exporting a React component from a `layout` file. On navigation, layouts preserve state, remain interactive, and do not rerender.

## See also

- [nextjs-linking-and-navigating](https://iinventedlight.com/library/notes/nextjs-linking-and-navigating/)
- [nextjs-route-groups](https://iinventedlight.com/library/notes/nextjs-route-groups/)

## Claims

- id: C1
  claim: Next.js routes from folders and files.
  source: S1
  evidence: "Next.js uses **file-system based routing**, meaning you can use folders and files to define routes."

- id: C2
  claim: Layouts keep state across navigations.
  source: S1
  evidence: "On navigation, layouts preserve state, remain interactive, and do not rerender."

- id: C3
  claim: A page file defines UI unique to a route.
  source: S2
  evidence: "The `page` file allows you to define UI that is **unique** to a route."

- id: C4
  claim: You define a layout by exporting from layout file.
  source: S1
  evidence: "You can define a layout by default exporting a React component from a [`layout` file](/docs/app/api-reference/file-conventions/layout)."

## Sources

- [S1] Layouts and pages. Next.js docs. https://nextjs.org/docs/app/getting-started/layouts-and-pages . License: MIT (vercel/next.js). Accessed 2026-11-09.

- [S2] page.js. Next.js docs. https://nextjs.org/docs/app/api-reference/file-conventions/page . License: MIT (vercel/next.js). Accessed 2026-11-09.


License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Copyright (c) 2025 Vercel, Inc. Sources: Next.js docs (vercel/next.js on GitHub / nextjs.org), MIT (https://raw.githubusercontent.com/vercel/next.js/canary/license.md). Text was condensed and changed from the originals.

---

Agents: [/agents.md](/agents.md) | [/.well-known/agent-library.json](/.well-known/agent-library.json).