## Why MDX? MDX lets you write **JSX inside Markdown** — meaning your blog posts can contain interactive React components alongside regular prose. This post demonstrates every feature available in this blog system. --- ## Text Formatting Standard markdown formatting works perfectly: - **Bold text** for emphasis - _Italic text_ for subtle highlights - ~~Strikethrough~~ for corrections - `inline code` for technical terms - [External links](https://nextjs.org) open in new tabs - [Internal links](/) stay within the site > **Blockquotes** are great for calling out important information or citing sources. They render with a distinctive left border and muted background. --- ## Code Blocks Syntax-highlighted code blocks with language detection: ### TypeScript ```typescript interface BlogPost { title: string; description: string; tags: string[]; createdAt: Date; content: string; } async function getPost(slug: string): Promise { const file = await import(`@/features/blog/content/${slug}.mdx`); return { ...file.metadata, content: file.default, }; } ``` ### React Component ```tsx "use client"; import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); return ( ); } ``` ### Shell Commands ```bash # Create a new Next.js project with TypeScript npx create-next-app@latest my-portfolio --typescript --tailwind --app # Install MDX support npm install @next/mdx next-mdx-remote gray-matter # Start the dev server npm run dev ``` ### CSS ```css /* Modern glassmorphism card */ .glass-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } ``` --- ## Tables Markdown tables render with proper styling: | Technology | Purpose | Why We Chose It | | ------------------- | ----------- | ---------------------------- | | **Next.js 16** | Framework | App Router, RSC, Turbopack | | **TypeScript** | Type Safety | Catch bugs at compile time | | **Tailwind CSS v4** | Styling | Utility-first, zero runtime | | **MDX** | Content | React components in Markdown | | **Framer Motion** | Animation | Declarative, performant | | **shadcn/ui** | Components | Accessible, customizable | --- ## Mermaid Diagrams Mermaid diagrams render inline — perfect for architecture docs and flowcharts: ### Architecture Overview ```mermaid graph TB A["User Request"] --> B["Next.js App Router"] B --> C["React Server Components"] C --> D["MDX Renderer"] D --> E["Custom Components"] D --> F["Syntax Highlighting"] D --> G["Mermaid Diagrams"] E --> H["Interactive UI"] style A fill:#3b82f6,color:#fff style B fill:#8b5cf6,color:#fff style H fill:#10b981,color:#fff ``` ### Blog Post Lifecycle ```mermaid sequenceDiagram participant Author participant MDX as MDX File participant Parser as MDX Parser participant React as React Renderer participant Browser Author->>MDX: Write content + components MDX->>Parser: Parse frontmatter + body Parser->>React: Compile to React tree React->>Browser: Hydrate interactive parts Browser->>Author: User sees rich content ``` --- ## Lists ### Ordered List 1. **Plan** your content structure 2. **Write** MDX with frontmatter metadata 3. **Add** custom components where needed 4. **Preview** locally with hot reload 5. **Deploy** — content updates instantly ### Unordered List with Nesting - **Frontend** - React Server Components for static content - Client Components for interactivity - Streaming for progressive loading - **Content Pipeline** - MDX parsing with `next-mdx-remote` - Frontmatter extraction with `gray-matter` - Rehype plugins for syntax highlighting - **Deployment** - Vercel for hosting - Edge Functions for API routes - ISR for incremental updates --- ## Custom MDX Components The following sections demonstrate custom React components that are available in all blog and project pages. ### WorkInProgress Banner Use this to mark sections that are still being developed: ### Dropdown Component Interactive dropdowns for collapsible content — great for FAQs, detailed explanations, or optional reading: MDX files are parsed in two stages: 1. **Frontmatter extraction** — `gray-matter` pulls out the YAML metadata (title, tags, dates) 2. **Content compilation** — `next-mdx-remote` compiles the MDX body into a React component tree The `MDXRemote` component receives a `components` map that maps custom element names to React components. When the MDX content references ``, it renders the actual `Dropdown` React component. ```typescript const components = { Dropdown, WorkInProgress, GeCarousel, // ... more custom components }; ``` This portfolio is built with: - **Next.js 16** with App Router and React Server Components - **TypeScript** for end-to-end type safety - **Tailwind CSS v4** with the new CSS-first configuration - **shadcn/ui** for accessible, customizable UI components - **Framer Motion** for smooth animations - **MDX** for rich content authoring Every component is designed to work in both light and dark themes using CSS custom properties. The design system uses CSS custom properties defined in the global stylesheet: ```css :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --border: oklch(0.922 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); } ``` Components use Tailwind classes like `bg-background`, `text-foreground`, `border-border` — which automatically adapt when the theme toggles. --- ## Images Standard markdown images work with Next.js optimization: ![Profile](/assets/profile-image.jpg) --- ## Math & Formulas Inline mathematical expressions using Unicode: The deflection of a cantilever beam is given by: **y = (F/EI)(Lx²/2 − x³/6)** Where: - **F** = Applied force (Newtons) - **E** = Young's modulus (Pa) - **I** = Moment of inertia (m⁴) - **L** = Beam length (m) - **x** = Position along the beam --- ## Horizontal Rules & Spacing Use `---` to create visual section breaks (like the ones throughout this post). --- ## Heading Hierarchy This post demonstrates all heading levels: # H1 — Page Title (used once) ## H2 — Major Section ### H3 — Subsection #### H4 — Detail Section --- ## Best Practices for MDX Blog Posts | Practice | Why | | ------------------------- | ------------------------------ | | **Use frontmatter** | SEO, sorting, filtering | | **Add `description`** | Appears in previews & OG tags | | **Tag appropriately** | Enables topic-based browsing | | **Use custom components** | Enrich static content | | **Keep images optimized** | Next.js Image handles this | | **Test in dev mode** | Hot reload catches errors fast | --- ## What's Next? This blog system is actively evolving. Upcoming features include: - 🔍 **Full-text search** across all posts - 📊 **Reading time estimation** in post cards - 💬 **Comment system** with GitHub Discussions - 📧 **Newsletter integration** for new post alerts - 🏷️ **Category pages** for topic-based browsing Stay tuned for updates — and feel free to explore the [source code](https://github.com/rahuljangir) to see how everything works under the hood!

Blog

Building an Interactive Blog with MDX, Next.js & Custom Components