Top Related Projects
The React Framework
This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
Simple, powerful and flexible site generation framework with everything you love from Next.js.
Independent technology for modern publishing, memberships, subscriptions and newsletters.
The world’s fastest framework for building websites.
Quick Overview
Next.js MDX Blog is a template for creating a blog using Next.js, MDX, and Tailwind CSS. It provides a clean, minimalist design and includes features like dark mode, RSS feed, and sitemap generation. This project serves as a starting point for developers looking to build their own blog with modern web technologies.
Pros
- Easy to set up and customize for personal use
- Built with performance and SEO in mind
- Includes dark mode and responsive design out of the box
- Leverages MDX for powerful content creation capabilities
Cons
- May require some Next.js and React knowledge to fully customize
- Limited built-in features compared to some full-fledged CMS solutions
- Styling customization might be challenging for those unfamiliar with Tailwind CSS
- Lacks built-in commenting system or advanced blog features
Code Examples
Here are a few code examples from the project:
- Fetching blog posts:
export async function getStaticProps() {
const posts = await getAllFilesFrontMatter('blog');
return { props: { posts } };
}
This code fetches all blog posts and their front matter for static site generation.
- Rendering MDX content:
import { MDXRemote } from 'next-mdx-remote';
export default function BlogPost({ mdxSource, frontMatter }) {
return (
<article>
<h1>{frontMatter.title}</h1>
<MDXRemote {...mdxSource} components={MDXComponents} />
</article>
);
}
This example shows how MDX content is rendered in a blog post component.
- Implementing dark mode:
import { useTheme } from 'next-themes';
export default function ThemeSwitch() {
const { theme, setTheme } = useTheme();
return (
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
Toggle Theme
</button>
);
}
This code snippet demonstrates how to implement a theme toggle using the next-themes
library.
Getting Started
To get started with this blog template:
-
Clone the repository:
git clone https://github.com/leerob/next-mdx-blog.git cd next-mdx-blog
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open
http://localhost:3000
in your browser to see the blog. -
Start customizing by editing
pages/index.js
and adding your own MDX files in thedata/blog
directory.
Competitor Comparisons
The React Framework
Pros of Next.js
- Comprehensive framework with built-in routing, server-side rendering, and API routes
- Large ecosystem and community support
- Regular updates and improvements from Vercel
Cons of Next.js
- Steeper learning curve for beginners
- More complex setup for simple projects
- Potentially overkill for small static sites
Code Comparison
Next.js (pages/index.js):
import Head from 'next/head'
export default function Home() {
return (
<div>
<Head>
<title>My Next.js App</title>
</Head>
<h1>Welcome to Next.js!</h1>
</div>
)
}
next-mdx-blog (pages/index.js):
import { getAllPosts } from '../lib/api'
import PostList from '../components/PostList'
export default function Home({ posts }) {
return <PostList posts={posts} />
}
export async function getStaticProps() {
const posts = getAllPosts(['title', 'date', 'slug'])
return { props: { posts } }
}
Summary
Next.js is a full-featured React framework suitable for large-scale applications, while next-mdx-blog is a specialized solution for creating MDX-based blogs. Next.js offers more flexibility and features but may be complex for simple projects. next-mdx-blog provides a streamlined approach for blog creation but with less customization options.
This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
Pros of tailwind-nextjs-starter-blog
- More comprehensive feature set, including newsletter integration, analytics, and SEO optimization
- Better documentation and customization options
- Active community with regular updates and contributions
Cons of tailwind-nextjs-starter-blog
- Steeper learning curve due to more complex structure and features
- Potentially heavier initial load due to additional dependencies
- May require more configuration for simpler blog setups
Code Comparison
next-mdx-blog:
export default function BlogPost({ frontMatter, markdownBody }) {
return (
<Layout>
<h1>{frontMatter.title}</h1>
<MDXRemote {...markdownBody} />
</Layout>
);
}
tailwind-nextjs-starter-blog:
export default function Blog({ posts, initialDisplayPosts, pagination }) {
return (
<>
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<ul>
{!initialDisplayPosts.length && 'No posts found.'}
{initialDisplayPosts.map((post) => (
<li key={post.slug} className="py-12">
<Article {...post} />
</li>
))}
</ul>
</div>
{pagination && pagination.totalPages > 1 && (
<Pagination currentPage={pagination.currentPage} totalPages={pagination.totalPages} />
)}
</>
);
}
The code comparison shows that tailwind-nextjs-starter-blog offers more advanced features like pagination and article components, while next-mdx-blog provides a simpler structure for rendering blog posts.
Simple, powerful and flexible site generation framework with everything you love from Next.js.
Pros of Nextra
- More comprehensive documentation and theming options
- Built-in support for multiple languages and internationalization
- Easier setup process with less configuration required
Cons of Nextra
- Less flexibility for custom layouts and designs
- Steeper learning curve due to more features and options
- Potentially slower build times for large sites
Code Comparison
next-mdx-blog:
import { MDXProvider } from '@mdx-js/react';
import { MDXRemote } from 'next-mdx-remote';
import { getFiles, getFileBySlug } from '../lib/mdx';
export default function Post({ source, frontMatter }) {
return (
<MDXProvider>
<MDXRemote {...source} />
</MDXProvider>
);
}
Nextra:
import { useRouter } from 'next/router';
import { getStaticProps, getStaticPaths } from 'nextra/ssg';
import { useConfig } from 'nextra-theme-docs';
export default function Page({ children }) {
const { route } = useRouter();
const { title, description } = useConfig();
return <>{children}</>;
}
Both repositories provide solutions for creating MDX-based blogs with Next.js, but Nextra offers a more feature-rich and opinionated approach, while next-mdx-blog provides a simpler, more customizable foundation. The choice between them depends on the specific needs of the project and the developer's preferences for flexibility versus out-of-the-box functionality.
Independent technology for modern publishing, memberships, subscriptions and newsletters.
Pros of Ghost
- Full-featured, production-ready CMS with a robust admin interface
- Built-in SEO tools, membership/subscription features, and email newsletters
- Larger community and ecosystem with more themes and plugins available
Cons of Ghost
- More complex setup and hosting requirements compared to static site generators
- Less flexibility for custom development and integration with other JavaScript frameworks
- Steeper learning curve for developers unfamiliar with Node.js and Ghost's architecture
Code Comparison
Ghost (JavaScript):
const ghostServer = new ghost();
ghostServer.start().then(() => {
console.log('Ghost server started');
});
next-mdx-blog (JavaScript):
import { getAllFilesFrontMatter } from '../lib/mdx';
export async function getStaticProps() {
const posts = await getAllFilesFrontMatter('blog');
return { props: { posts } };
}
Summary
Ghost is a full-featured CMS suitable for content-heavy websites and publications, offering built-in features like memberships and newsletters. next-mdx-blog is a lightweight, static site generator based on Next.js, ideal for developers who prefer more control over their stack and want to leverage React components in their content. Ghost provides a more comprehensive out-of-the-box solution, while next-mdx-blog offers greater flexibility and integration with the React ecosystem.
The world’s fastest framework for building websites.
Pros of Hugo
- Faster build times for large sites
- No JavaScript runtime required, resulting in lighter and faster websites
- More extensive theme ecosystem and built-in templates
Cons of Hugo
- Steeper learning curve, especially for developers not familiar with Go
- Less flexibility for custom functionality compared to Next.js-based solutions
- Limited dynamic content capabilities without additional server-side components
Code Comparison
Hugo (config.toml):
baseURL = "https://example.com/"
languageCode = "en-us"
title = "My Hugo Site"
theme = "ananke"
Next-MDX-Blog (next.config.js):
module.exports = {
pageExtensions: ['mdx', 'md', 'jsx', 'js'],
webpack: (config, { isServer }) => {
// Custom webpack config
return config
},
}
Hugo focuses on a simpler configuration approach, while Next-MDX-Blog allows for more customization through JavaScript. Hugo's static site generation is more straightforward, whereas Next-MDX-Blog leverages Next.js for server-side rendering and dynamic content capabilities. The choice between the two depends on the project's requirements, with Hugo excelling in pure static sites and Next-MDX-Blog offering more flexibility for dynamic content and React-based development.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
next-mdx-blog
This is a blog template built with:
- Framework: Next.js
- Deployment: Vercel
- Styling: Tailwind CSS
- Analytics: Vercel Analytics
- Database (Optional): Postgres
Running Locally
This application requires Node.js v18.17+.
git clone https://github.com/leerob/next-mdx-blog.git
cd next-mdx-blog
pnpm install
pnpm dev
Database (Optional)
Create a .env.local
file with your POSTGRES_URL
environment variable to store redirects.
CREATE TABLE redirects (
id SERIAL PRIMARY KEY,
source VARCHAR(255) NOT NULL,
destination VARCHAR(255) NOT NULL,
permanent BOOLEAN NOT NULL
);
Top Related Projects
The React Framework
This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
Simple, powerful and flexible site generation framework with everything you love from Next.js.
Independent technology for modern publishing, memberships, subscriptions and newsletters.
The world’s fastest framework for building websites.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot