Today was all about cleaning up blog architecture and making it future-proof. Here’s what I achieved:

1. Automated SEO Metadata for All Blog Posts I implemented a utility (lib/getPostFrontmatter.ts) that dynamically reads and parses SEO metadata (title, description, Open Graph, Twitter card, etc.) directly from each post's MDX frontmatter.

No more hardcoded metadata — each blog post now handles its own SEO data automatically.

2. Migrated to a Dynamic Blog Route I replaced static routing with a single dynamic route:

app/blog/[...slug]/page.tsx

This page:

• Extracts metadata based on the slug in the URL.
• Dynamically renders MDX content using next-mdx-remote (or compatible setup).
• Works seamlessly with all existing and future blog posts.

3. Removed Static page.tsx Files To avoid conflicts and duplication:

• I removed all old page.tsx files under blog directories.
• The new [...slug]/page.tsx now handles everything.
• This also resolved multiple "Module not found" errors from outdated imports.

4. Fixed Import and Loader Issues I debugged several file and import inconsistencies:

• Renamed files for consistent imports (seoMetadata.ts, not seo-metadata.ts).
• Switched from direct MDX imports to manual frontmatter parsing using gray-matter.
• Aligned everything to work smoothly with dynamic rendering.

5. Ready for Dynamic MDX Rendering With the dynamic route in place, the blog is now fully set up to:

• Use next-mdx-remote to render posts on the fly.
• Add new blog posts without writing new routes or components.
• Keep the blog lean, DRY, and scalable.

Final Thoughts This cleanup results in less boilerplate, fewer bugs, and a smoother content workflow moving forward. Just drop an .mdx file in the right folder — and it’s good to go.