Nextjs Templates & Themes Logo Nextjs Templates & Themes
Nextjs Mdx Blog screenshot

Nextjs Mdx Blog

Author Avatar Theme by Changoman
Updated: 18 Sep 2023
419 Stars

UPDATED to Next.js App Router! Starter template built with Contentlayer, MDX, shadcn-ui, and Tailwind CSS.

Github Live Preview

Categories

React Tailwind

Overview:

The NextJS-MDX-shadcn-ui-Tailwind-Blog is a Next.js starter template designed for creating blogs or personal websites. It utilizes various technologies such as Next.js, MDX, shadcn-ui, and Tailwind CSS to offer a seamless and customizable blog-building experience. This template is inspired by Lee Robinson’s work and comes with features like Next.js App Router, Contentlayer for content processing, MDX for writing posts, shadcn-ui for UI components, and Tailwind CSS for styling.

Features:

  • Next.js App Router: Provides a robust routing system for building single-page applications.
  • Content processing with Contentlayer: Helps in handling content processing and management.
  • Write posts with MDX: Enables writing blog posts using MDX, a flexible markdown format that supports JSX components.
  • UI components with shadcn-ui: Offers UI components from shadcn-ui, allowing easy customization and styling.
  • Style with Tailwind CSS: Utilizes Tailwind CSS for efficient and customizable styling of the blog or personal website.

Installation:

To install the NextJS-MDX-shadcn-ui-Tailwind-Blog starter template:

  1. Clone the repository:
git clone <repository_url>
  1. Navigate to the cloned directory:
cd <cloned_directory>
  1. Install the dependencies using npm or yarn:
npm install

or

yarn install

  1. Update the WEBSITE_HOST_URL in the /src/lib/constants.ts file to match your live site URL.

  2. Customize the sitemap.ts file in case you add more pages to the website.

  3. Start the development server:

npm run dev

or

yarn dev
  1. Access the site in your browser at http://localhost:3000/.

Summary:

The NextJS-MDX-shadcn-ui-Tailwind-Blog is a Next.js starter template perfect for quickly setting up a blog or personal website. It leverages the power of Next.js, MDX, shadcn-ui, and Tailwind CSS to provide efficient routing, content processing, flexible markdown writing, customizable UI components, and easy styling. By following the installation steps and customizing the required files, users can quickly have their own live blog or personal website up and running.