# enkheeboldu05/nextjs-blog architecture

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

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

## Overview

This is a small Next.js personal website. A visitor opens the home route and can follow its link to a profile page; that page renders shared layout and profile content. The app wrapper imports global styling. The README describes a tutorial-built site, and the sampled files show only these page and presentation paths.

Main entry points: [`pages/_app.js`](https://github.com/enkheeboldu05/nextjs-blog/blob/main/pages/_app.js) (App wrapper), [`components/layout.js`](https://github.com/enkheeboldu05/nextjs-blog/blob/main/components/layout.js) (Site layout), [`pages/index.js`](https://github.com/enkheeboldu05/nextjs-blog/blob/main/pages/index.js) (Home page), [`pages/posts/first-post.js`](https://github.com/enkheeboldu05/nextjs-blog/blob/main/pages/posts/first-post.js) (Profile page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["Page routes"]
  node_app["App wrapper<br/>[_app.js]"]
  node_home["Home page<br/>[index.js]"]
  node_profile["Profile page<br/>[first-post.js]"]
end

subgraph group_presentation["Shared presentation"]
  node_layout["Site layout<br/>[layout.js]"]
  node_globalcss["Global styles<br/>[global.css]"]
  node_homecss["Home styles<br/>[Home.module.css]"]
  node_layoutcss["Layout styles<br/>[layout.module.css]"]
  node_utilcss["Utility styles<br/>[utils.module.css]"]
  node_portrait["Profile image"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_app
node_app -->|"renders route"| node_home
node_app -->|"renders route"| node_profile
node_home -->|"links to"| node_profile
node_profile -->|"renders within"| node_layout
node_app -->|"imports"| node_globalcss
node_home -->|"imports"| node_homecss
node_layout -->|"imports"| node_layoutcss
node_layout -->|"imports"| node_utilcss
node_layout -->|"displays"| node_portrait

click node_app "https://github.com/enkheeboldu05/nextjs-blog/blob/main/pages/_app.js"
click node_home "https://github.com/enkheeboldu05/nextjs-blog/blob/main/pages/index.js"
click node_profile "https://github.com/enkheeboldu05/nextjs-blog/blob/main/pages/posts/first-post.js"
click node_layout "https://github.com/enkheeboldu05/nextjs-blog/blob/main/components/layout.js"
click node_globalcss "https://github.com/enkheeboldu05/nextjs-blog/blob/main/styles/global.css"
click node_homecss "https://github.com/enkheeboldu05/nextjs-blog/blob/main/styles/Home.module.css"
click node_layoutcss "https://github.com/enkheeboldu05/nextjs-blog/blob/main/components/layout.module.css"
click node_utilcss "https://github.com/enkheeboldu05/nextjs-blog/blob/main/styles/utils.module.css"
click node_portrait "https://github.com/enkheeboldu05/nextjs-blog/tree/main/public/images"

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_app,node_home,node_profile toneBlue
class node_layout,node_globalcss,node_homecss,node_layoutcss,node_utilcss,node_portrait toneAmber
class node_visitor toneIndigo
```

## Components

### Page routes

- [App wrapper](https://github.com/enkheeboldu05/nextjs-blog/blob/main/pages/_app.js): `pages/_app.js`
- [Home page](https://github.com/enkheeboldu05/nextjs-blog/blob/main/pages/index.js): `pages/index.js`
- [Profile page](https://github.com/enkheeboldu05/nextjs-blog/blob/main/pages/posts/first-post.js): `pages/posts/first-post.js`

### Shared presentation

- [Site layout](https://github.com/enkheeboldu05/nextjs-blog/blob/main/components/layout.js): `components/layout.js`
- [Global styles](https://github.com/enkheeboldu05/nextjs-blog/blob/main/styles/global.css): `styles/global.css`
- [Home styles](https://github.com/enkheeboldu05/nextjs-blog/blob/main/styles/Home.module.css): `styles/Home.module.css`
- [Layout styles](https://github.com/enkheeboldu05/nextjs-blog/blob/main/components/layout.module.css): `components/layout.module.css`
- [Utility styles](https://github.com/enkheeboldu05/nextjs-blog/blob/main/styles/utils.module.css): `styles/utils.module.css`
- [Profile image](https://github.com/enkheeboldu05/nextjs-blog/tree/main/public/images): `public/images`

### Other components

- **Visitor**

## Connections

- Visitor → App wrapper: opens site
- App wrapper → Home page: renders route
- App wrapper → Profile page: renders route
- Home page → Profile page: links to
- Profile page → Site layout: renders within
- App wrapper → Global styles: imports
- Home page → Home styles: imports
- Site layout → Layout styles: imports
- Site layout → Utility styles: imports
- Site layout → Profile image: displays