next-mdx-blog

Next.js + MDX blog template with Tailwind CSS and TypeScript.

7,452

1,437

7,452

Top Related Projects

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.

nextra

12,675

Simple, powerful and flexible site generation framework with everything you love from Next.js.

Ghost

49,577

Independent technology for modern publishing, memberships, subscriptions and newsletters.

hugo

80,088

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 the data/blog directory.

Competitor Comparisons

next.js

132,759

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.

tailwind-nextjs-starter-blog

9,604

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.

nextra

12,675

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.

Ghost

49,577

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.

hugo

80,088

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 Copilot

README

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

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