Mdx

MDX Next.js 15 Starter: Build Modern Content Sites with Tailwind & Shadcn/UI

This MDX starter template provides a robust foundation for building contemporary, content-rich websites. Leveraging the power of Next.js 15's App Router and React Server Components, it integrates seamlessly with MDX for Markdown-based content creation. Styled with Tailwind CSS and enhanced by Shadcn/UI components, this template offers a minimal yet feature-packed starting point for developers aiming for a modern, responsive, and type-safe web development experience. It's designed for quick setup and efficient content management.

Features:

• Next.js 15 Integration: Utilizes the latest App Router and React Server Components for optimal performance.
• MDX Content Authoring: Enables writing content using Markdown combined with React components.
• Advanced Code Highlighting: Provides syntax highlighting for multiple languages with a copy-to-clipboard button and dark mode support.
• Interactive Heading Anchors: Clickable '#' icons next to headings copy the URL with anchor for easy section sharing.
• Dynamic Dark Mode: Features system preference detection, a manual toggle, and session persistence for theme selection.
• Comprehensive Metadata Support: Includes frontmatter-style metadata for MDX, TypeScript interfaces, customizable fields, a display component, and SEO optimization.
• Shadcn/UI Integration: Comes with beautiful and accessible UI components out-of-the-box.
• TypeScript Enabled: Offers full type safety and modern JavaScript development capabilities.
• Tailwind CSS Styling: Employs a utility-first CSS framework for flexible UI design.
• Mobile-First Responsive Design: Ensures optimal viewing on all device sizes.
• Quick Start Setup: Enables rapid project initiation via 'git clone' and 'pnpm install'.
• Organized Project Structure: Features a clear file layout for Next.js app, MDX content, components, and styles.
• One-Click Vercel Deployment: Simplifies deployment with an integrated Vercel deploy button.

Summary:

The MDX Starter Template is a comprehensive boilerplate for developers looking to quickly initiate projects using Next.js 15 and MDX. It integrates essential features like code highlighting, dark mode, anchor links, and metadata support, all styled with Tailwind CSS and enriched by Shadcn/UI components. This template streamlines the setup process for creating modern, content-driven websites with a focus on developer experience, type safety, and responsive design, allowing for efficient development and deployment.