How nextjs/nextgram works
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: [id]/page.tsx Modal photo route · layout.tsx Root layout · app/page.tsx Photo gallery · [id]/page.tsx Standalone photo route
Components 9
Photo navigation
- Photo gallery
app/page.tsx
Photo routes
- Modal photo route
app/@modal/(.)photos/[id]/page.tsx - Standalone photo route
app/photos/[id]/page.tsx - Modal UI
app/@modal/(.)photos/[id]/modal.tsx
App shell
- Root layout
app/layout.tsx - Modal fallback
app/@modal/default.tsx - Page fallback
app/default.tsx - Global styles
app/global.css
Other components
- User
Connections 6
- User → Photo gallery: opens
- Photo gallery → Modal photo route: links to photo
app/page.tsx - User → Standalone photo route: refreshes photo
Readme.md - Root layout → Modal photo route: renders modal slot
app/layout.tsx - Modal photo route → Modal UI: renders
app/@modal/(.)photos/[id]/page.tsx - Root layout → Global styles: imports
app/layout.tsx