Next.js MDX Blog Template

A modern, minimalist blog template built with Next.js, MDX, and Tailwind CSS. Perfect for developers who want to share their thoughts and showcase their work.

✨ Features

• 🚀 Next.js 15 with App Router
• ⚡ React 19 with Server Components
• 🎨 Tailwind CSS 4 for styling
• 🧩 shadcn/ui components via Radix UI
• 🌙 Dark/Light mode with next-themes
• 📝 MDX support for blog posts
• 🔍 SEO optimized with metadata
• 📊 Typed with TypeScript
• 🧹 Linting with ESLint
• 💅 Code formatting with Prettier
• 🦮 Accessibility focused design
• 🏎️ Performance optimized
• 📱 Responsive on all devices
• 🏃🏻‍♂️‍➡️ Animations with Motion
• 🎞️ View Transitions API support
• 🔒 Code quality with Husky & lint-staged

🧰 Tech Stack

• Next.js 15
• React 19
• TypeScript
• Tailwind CSS 4
• Radix UI
• Lucide Icons
• MDX for blog posts
• Shiki for code highlighting
• Geist Font for typography

📋 Prerequisites

• Node.js (v20 or higher)
• pnpm (v8 or higher)

🚀 Getting Started

Installation

1. Clone this repository

   git clone https://github.com/loke-dev/nextjs-mdx-blog-template my-website
   cd my-website

2. Install dependencies

   pnpm install

3. Start the development server

   pnpm dev

4. Open http://localhost:3000 with your browser to see the result.

📁 Project Structure

/
├── public/           # Static assets
├── src/
│   ├── app/          # App router pages
│   ├── components/   # React components
│   │   ├── mdx/      # MDX-specific components
│   │   └── ui/       # UI components (shadcn)
│   ├── lib/          # Utility functions
│   ├── posts/        # MDX blog posts
│   ├── styles/       # Global styles
│   └── types/        # TypeScript types
├── .eslintrc.js      # ESLint configuration
├── .prettierrc       # Prettier configuration
├── next.config.ts    # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
└── tsconfig.json     # TypeScript configuration

📝 Usage

Creating Blog Posts

Add new MDX files to the src/posts directory:

---
title: My New Post
date: 2024-03-25
description: A description of my new post
---

# My New Post

This is the content of my post written in MDX.

Customization

• Update site metadata in src/app/layout.tsx
• Modify the theme in src/styles/globals.css
• Add or modify components in src/components
• Update pages in src/app directory

🛠️ Development

# Run development server
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Run linting
pnpm lint

# Format code
pnpm format

🚢 Deployment

This template is optimized for deployment on Vercel, but can be deployed on any platform that supports Next.js.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgements

• Next.js team for the incredible framework
• Vercel for hosting and deployment
• shadcn/ui for the beautiful components
• Tailwind CSS for the utility-first CSS framework