Capítulo 288 de 456

Project Structure

Core Idea

Full reference of folder and file conventions for a Next.js project, focused on Pages Router routing/file conventions plus shared top-level files.

Key Concepts

  • app: App Router root.
  • pages: Pages Router root.
  • public: static assets served as-is.
  • src: optional application source folder.
  • _app: custom App file (.js/.jsx/.tsx).
  • _document: custom Document file.
  • _error: custom error page.
  • 404 / 500: dedicated error pages.
  • index (folder or file): home/nested page via file-system routing.
  • [folder]/[file]: dynamic route segment.
  • [...folder]/[...file]: catch-all route segment.
  • [[...folder]]/[[...file]]: optional catch-all route segment.

Reference Tables

Top-level filePurpose
next.config.jsNext.js configuration
package.jsonDependencies and scripts
instrumentation.tsOpenTelemetry/Instrumentation
proxy.tsRequest proxy (formerly middleware)
.env / .env.local / .env.production / .env.developmentEnvironment variables (untracked)
eslint.config.mjsESLint config
.gitignoreGit ignore rules
next-env.d.tsTypeScript declarations for Next.js (untracked)
tsconfig.json / jsconfig.jsonTS/JS config
Route conventionMeaning
index / folder/indexHome page / nested page
fileNested page
[folder]/index or [file]Dynamic route segment
[...folder]/index or [...file]Catch-all route segment
[[...folder]]/index or [[...file]]Optional catch-all route segment

Key Takeaways

  1. Pages Router routing is purely folder/filename driven: index files and [bracket] syntax define the entire route table, no explicit route registration.
  2. _app, _document, _error, 404, 500 are the fixed set of special files the Pages Router recognizes at the pages/ root.
  3. Top-level config files (next.config.js, .env*, tsconfig.json) are shared infrastructure regardless of App vs Pages Router.
  4. proxy.ts is the current name for what was formerly middleware.ts — same top-level convention slot.

Connects To

  • ch287 installation-1: where _app.tsx/_document.tsx are shown in full code.
  • ch285 glossary: "Private Folders", "Route Segment", "Proxy" entries define the same concepts for the App Router side.