Next.js MDX Template

Simple, easy-to-modify template to use for creating a blog, portfolio, or content-based website

Features

• ✅ Next.js 14 App Directory
• ✅ next-mdx-remote
• ✅ RSS Feed
• ✅ Sitemap generation
• Tailwind CSS
• Syntax highlighting in .mdx
• Custom components embeddable in .mdx files
• Utility functions to customize further

View live demo

Config

• config/site.ts - Site title, description, and URL
• .env to set BASE_URL if you'd like to override the base URL you set in config/site.ts

Structure

The majority of the structure should be self evident, based on Next.js docs

• content/ - Location for posts (.mdx files)
• utils/mdx-utils.ts - Main functions for handling .mdx and converting frontmatter
• lib/helpers.ts - extra (i.e. not required) Options for handling .mdx

Notes

• gray-matter and date-fns are included but not required
  • If you'd like to remove them, remove the lib/helpers.ts file and its connections
• Based off of leerob.io repo