Dynamic Site Generation Using MDX and Next.js
Articles and case studies are written in MDX and automatically discovered through the filesystem, allowing new content to be added without modifying application code.
1. Automated Navigation: By organizing our content into MDX files within specific folders, the site automatically generates navigation elements. This setup allows each folder and MDX file to correspond to a unique section and page on the website, making it easy to expand or modify content.
2. Navbar Generation: The dynamic routing and navigation mechanism ensures that the navigation bar is always up-to-date with new sections, making it effortless to navigate through the site.
3. Faster Documentation: Writing articles or documentation using the MDX format combines the simplicity of Markdown with the flexibility of React components. The integration with 'next-mdx-remote' makes it possible to import custom components into the documentation, allowing for rich, interactive content that accelerates the creation process.
These functionalities are primarily implemented in fetchers.ts and sidebar-data.ts.
Folder Structure Example
src/
└── app/
└── content/
└── mdx-content/
└── about-this-site/
└── dynamic-site-generation.mdx
└── experience/
└── BCCHR.mdx
└── moment-energy.mdx