← All notes

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
• 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."

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.

@misc{iil_note_fwtcred0,
  author = {{iinventedlight}},
  title = {{Layouts and pages in the App Router}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-09},
  url = {https://iinventedlight.com/library/notes/nextjs-layouts-and-pages/},
  note = {Permanent ID iil:note:fwtcred0. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/nextjs-layouts-and-pages.md.