Dynamic Site Generation Using MDX and Next.js
This portfolio site is built on a previous project that I developed to dynamically generate a documentation site using MDX and Next.js. The project was designed to simplify the process of creating and maintaining a documentation website by leveraging the power of MDX for content creation and Next.js for server-side rendering and routing.
https://github.com/kylezhao101/kylezhao101-api-doc-gen-tool
Features
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