5 Best Nextjs MDX Blog Starters Github

Jan 21, 2024

Nextjs MDX Blog will be the great choice for building personal blog or portfolio.

MDX offer lot more customizations and with Nextjs your site will be highly optimized.

You can create Nextjs MDX Blog from scratch, or choose these MDX blog boilerplate (Blog template).

1. Nextjs MDX Blog Starter

Nextjs MDX Blog Starter
Nextjs MDX Blog Starter
Nextjs MDX Blog Starter

DEMO | GITHUB

In all Github, by far this is the most advanced Nextjs MDX Blog Starter with lots of features. You don’t need to do more codings, just start customizing tailwind css.

This is inspired by original tailwind blog.

Read: – Create Sitemap In NextJS App Router Blog

Here are the list of features you’ll get.

  • Easy styling customization with Tailwind 2.0 and primary color attribute
  • Near perfect lighthouse score – Lighthouse report
  • Lightweight, 45kB first load JS, uses Preact in production build
  • Mobile-friendly view
  • Light and dark theme
  • Supports plausible, simple analytics and google analytics
  • MDX – write JSX in markdown documents!
  • Server-side syntax highlighting with line numbers and line highlighting via rehype-prism-plus
  • Math display supported via KaTeX
  • Citation and biliography support via rehype-citation
  • Automatic image optimization via next/image
  • Flexible data retrieval with mdx-bundler
  • Support for tags – each unique tag will be its own page
  • Support for multiple authors
  • Blog templates
  • TOC component
  • Support for nested routing of blog posts
  • Newsletter component with support for mailchimp, buttondown and convertkit
  • Supports giscus, utterances or disqus
  • Projects page
  • SEO friendly with RSS feed, sitemaps and more!

My recommendations is to go this this template.

2. Simple static blog made with Next.js and MDX

DEMO | GITHUB

If you want to customize the blog from scratch, this starter template is for you. It has less features, you need to implement it by yourself.

3. Nextjs MDX Blog Starters

NextJS MDX Blog Starter

DEMO | GITHUB

This starter has enough features you’ll need. It has featured images, pagination, Theme UI Component Design System, Vercel Deployment and more.. This is also the best starter template for customizing your blog.

4. Nextjs MDX Blog Kit

NextJS-MDX-Blog-Kit

DEMO | GITHUB

Starter code for creating a static blog system using Next.js and MDX. A service worker for offline reading is set up, and the blog has Perfect Lighthouse scores.

Here are the features list.

  • Static website deployment
  • Write your posts in markdown, and use React components in your markdown thanks to MDX. Or use plain React, if you prefer.
  • A CLI for creating new pages or posts. It processes all the necessary meta data for creating the blog list and adding SEO data to all pages.
  • Perfect Lighthouse scores.
  • Excellent SEO
  • Service Worker that caches all pages and posts for offline reading
  • Tag search
  • A reading progress indicator on posts (optional/configurable)
  • Code syntax highlighting
  • Smooth scroll links
  • Optimized images
  • Tests are set up using Jest
  • Easy deploys with Zeit’s Now

5. Nextjs Typescript MDX Blog Starter Template

DEMO | GITHUB

This is built with typescript and other technologies are