MDXify Blog is a modern, fast, and flexible blog platform built with Next.js 15 and MDX. It allows you to write your blog posts in Markdown with the power of JSX.
- Next.js 15 with App Router
- MDX/Markdown for writing content
- Tailwind CSS, Tailwind Typography for styling
- Dark mode support
- SEO optimized
- Responsive design
- Syntax highlighting
To get started with MDXify Blog, follow these steps:
- Clone the repository:
git clone https://github.com/Raka-coder/mdxify-next-blog- Install the dependencies:
bun install // bun
or
npm install // npm- Start the development server:
bun dev // bun
or
npm run dev // npm - Open your browser and navigate to http://localhost:3000
The project structure is as follows:
blogweb/
├── app/
│ ├── posts/
│ ├── types/
│ ├── utils/
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── assets/
├── components/
├── contents/
│ └── posts/
├── context/
├── public/
├── bun.lock
├── eslint.config.mjs
├── next.config.ts
├── package.json
└── README.md
To write content in MDXify Blog, you can use the mdx extension for your files. For example, if you have a post called index.mdx, you can write your content in it.
create a new folder in the contents/posts directory.
use index.mdx as the filename for your post.
You can customize the blog by modifying the following files:
app/layout.tsx: Customize the layout of your blog.app/page.tsx: Customize the home page of your blog.
To learn more about the technologies used in this project, check out the following resources:
- Next.js Documentation - learn about Next.js features and API.
- MDX Documentation - MDX - learn about MDX and how to use it.
- Tailwind CSS - learn about Tailwind CSS.
- Lucide React - A collection of open source icons.
- Prism React Renderer - A React renderer for Syntax Highlighting.
- React Tooltip - A lightweight, accessible tooltip component.
- Sonner - A modern notification library for React.