Mortazasadat / mdx-starter-template

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, Clone the project

git clone https://github.com/Mortazasadat/mdx-starter-template.git

Second, Download dev dependencies

npm install
#or
pnpm install
#or
bun install

Third, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Key Features:

• 📝 MDX for Content: Seamlessly blend Markdown and React components to create rich, interactive content.
• 🌙 Dark Mode: Enhanced reading experience with dark mode, implemented using the awesome next-theme library.
• 🔓 Open Source: Free and open for everyone to use, contribute to, and customize.

Why MDX?

MDX allows me to write posts with standard Markdown while embedding React components directly into the content. This combination brings my blog posts to life with interactive elements and dynamic content.

Dark Mode with 'next-theme'

With the growing preference for dark mode to reduce eye strain and improve readability in low-light environments, I integrated next-theme to provide a seamless switch between light and dark modes. Users can now enjoy reading in their preferred theme with just a click.

How It Works:

• Reading MDX Files: I leveraged frontmatter to read and parse MDX files, making it easy to manage and organize my blog posts.
• Theming: Implemented via next-theme, ensuring a smooth and responsive transition between themes based on user preference.

Note

I hope this blog serves as a useful resource and a source of inspiration for fellow developers and writers. Your feedback, contributions, and suggestions are highly welcome!

mdx-starter-template