# nextjs/nextgram architecture

> Architecture diagram of the GitHub repository nextjs/nextgram, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nextjs/nextgram
- Repository: https://github.com/nextjs/nextgram

## Overview

NextGram is a small Next.js photo-routing demo. A user opens the gallery and selects a photo: in-app navigation presents the photo in a modal, while a refresh renders the same photo as a standalone page. The root layout supplies the modal slot and portal target; route defaults provide empty slot fallbacks. The README documents the two routing outcomes, while the excerpts show the links, route components, layout, and modal behavior. No photo storage or external service is shown.

Main entry points: [`app/@modal/(.)photos/[id]/page.tsx`](https://github.com/nextjs/nextgram/blob/main/app/%40modal/(.)photos/%5Bid%5D/page.tsx) (Modal photo route), [`app/layout.tsx`](https://github.com/nextjs/nextgram/blob/main/app/layout.tsx) (Root layout), [`app/page.tsx`](https://github.com/nextjs/nextgram/blob/main/app/page.tsx) (Photo gallery), [`app/photos/[id]/page.tsx`](https://github.com/nextjs/nextgram/blob/main/app/photos/%5Bid%5D/page.tsx) (Standalone photo route)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Photo navigation"]
  node_gallery["Photo gallery<br/>[page.tsx]"]
end

subgraph group_routes["Photo routes"]
  node_modal_route["Modal photo route<br/>[page.tsx]"]
  node_standalone_route["Standalone photo route<br/>[page.tsx]"]
  node_modal_ui["Modal UI<br/>[modal.tsx]"]
end

subgraph group_shell["App shell"]
  node_root_layout["Root layout<br/>[layout.tsx]"]
  node_modal_fallback["Modal fallback<br/>[default.tsx]"]
  node_page_fallback["Page fallback<br/>[default.tsx]"]
  node_global_styles["Global styles<br/>[global.css]"]
end

node_user(("User"))

node_user -->|"opens"| node_gallery
node_gallery -->|"links to photo"| node_modal_route
node_user -->|"refreshes photo"| node_standalone_route
node_root_layout -->|"renders modal slot"| node_modal_route
node_modal_route -->|"renders"| node_modal_ui
node_root_layout -->|"imports"| node_global_styles

click node_gallery "https://github.com/nextjs/nextgram/blob/main/app/page.tsx"
click node_modal_route "https://github.com/nextjs/nextgram/blob/main/app/%40modal/(.)photos/%5Bid%5D/page.tsx"
click node_standalone_route "https://github.com/nextjs/nextgram/blob/main/app/photos/%5Bid%5D/page.tsx"
click node_modal_ui "https://github.com/nextjs/nextgram/blob/main/app/%40modal/(.)photos/%5Bid%5D/modal.tsx"
click node_root_layout "https://github.com/nextjs/nextgram/blob/main/app/layout.tsx"
click node_modal_fallback "https://github.com/nextjs/nextgram/blob/main/app/%40modal/default.tsx"
click node_page_fallback "https://github.com/nextjs/nextgram/blob/main/app/default.tsx"
click node_global_styles "https://github.com/nextjs/nextgram/blob/main/app/global.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_gallery,node_user toneBlue
class node_modal_route,node_standalone_route,node_modal_ui toneAmber
class node_root_layout,node_modal_fallback,node_page_fallback,node_global_styles toneMint
```

## Components

### Photo navigation

- [Photo gallery](https://github.com/nextjs/nextgram/blob/main/app/page.tsx): `app/page.tsx`

### Photo routes

- [Modal photo route](https://github.com/nextjs/nextgram/blob/main/app/%40modal/(.)photos/%5Bid%5D/page.tsx): `app/@modal/(.)photos/[id]/page.tsx`
- [Standalone photo route](https://github.com/nextjs/nextgram/blob/main/app/photos/%5Bid%5D/page.tsx): `app/photos/[id]/page.tsx`
- [Modal UI](https://github.com/nextjs/nextgram/blob/main/app/%40modal/(.)photos/%5Bid%5D/modal.tsx): `app/@modal/(.)photos/[id]/modal.tsx`

### App shell

- [Root layout](https://github.com/nextjs/nextgram/blob/main/app/layout.tsx): `app/layout.tsx`
- [Modal fallback](https://github.com/nextjs/nextgram/blob/main/app/%40modal/default.tsx): `app/@modal/default.tsx`
- [Page fallback](https://github.com/nextjs/nextgram/blob/main/app/default.tsx): `app/default.tsx`
- [Global styles](https://github.com/nextjs/nextgram/blob/main/app/global.css): `app/global.css`

### Other components

- **User**

## Connections

- User → Photo gallery: opens
- Photo gallery → Modal photo route: links to photo (evidence: `app/page.tsx`)
- User → Standalone photo route: refreshes photo (evidence: `Readme.md`)
- Root layout → Modal photo route: renders modal slot (evidence: `app/layout.tsx`)
- Modal photo route → Modal UI: renders (evidence: `app/@modal/(.)photos/[id]/page.tsx`)
- Root layout → Global styles: imports (evidence: `app/layout.tsx`)