Project Structure
Project Structure Overview
This project is structured to simplify content management and addition. By leveraging Next.js route groups and MDX, we efficiently organize content, while frontmatter is used for metadata management.

The sitemap is an XML file that provides a structured list of all the pages available on the website. It helps search engines like Google to efficiently crawl and index the site's content, ensuring that all important pages are discoverable. The sitemap includes URLs for each page, along with metadata such as the last update time, change frequency, and priority. This project generates a sitemap automatically, reflecting the dynamic nature of the content and ensuring that search engines have the most up-to-date information about the site's structure.
┌───────────────┬────────┐ │ (index) │ Values │ ├───────────────┼────────┤ │ indexSitemaps │ 1 │ │ sitemaps │ 1 │ └───────────────┴────────┘
SITEMAP INDICES
jonaskgomo.com/sitemap.xml
Route (app) Size First Load JS
┌ ○ / 5.19 kB 142 kB ├ ○ /_not-found 873 B 88 kB ├ ƒ /api/og 0 B 0 B ├ ○ /demoscene 464 B 130 kB ├ ● /demoscene/[slug] 2.12 kB 144 kB ├ └ /demoscene/component-showcase ├ ○ /guides 464 B 130 kB ├ ● /guides/[slug] 2.12 kB 144 kB ├ ├ /guides/colophon ├ ├ /guides/project-structure ├ └ /guides/silent-agents ├ ○ /icon 0 B 0 B ├ ○ /notes 464 B 130 kB ├ ● /notes/[slug] 2.12 kB 144 kB ├ └ /notes/stream ├ ○ /research 464 B 130 kB └ ● /research/[slug] 2.12 kB 144 kB └ /research/portability
- First Load JS shared by all 87.1 kB ├ chunks/720-4d92c574d847ecd4.js 31.6 kB ├ chunks/bc06a508-35cf56236c5afd7c.js 53.6 kB └ other shared chunks (total) 1.91 kB
Content Organization
Content is organized using route groups. Creating a new folder in the posts directory automatically establishes a new route group for your content.
Adding a New Category
To introduce a new category:
- Duplicate the Guides Folder: Copy the existing guides folder within the posts directory.
- Rename the Folder: Change the name of the duplicated folder to your desired category name.
- Add Content: Populate your new category folder with content files, typically .mdx files.
This setup allows seamless expansion of site content without manual route configuration. For more on routing, see the Next.js Routing Documentation.
Component Integration
MDX is used for content creation, enabling the inclusion of React components directly within markdown files.
Adding a New Component
To add a component:
- Create the Component: Define your React component as usual.
- Register the Component: Add it to the
mdx-components.tsx
file at the project root. This maps component names to implementations, making them accessible in MDX files.
For more on MDX with Next.js, refer to the Next.js MDX Documentation.
Frontmatter Usage
Frontmatter is employed to add metadata to markdown files, crucial for categorization and providing additional context. The Post
interface in the types
directory defines this metadata.