More Premium Hugo Themes Premium Tailwind Themes

Nextjs Mdx Blog

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

Nextjs Mdx Blog

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

Author Avatar Theme by changoman
Github Stars Github Stars: 419
Last Commit Last Commit: Sep 18, 2023 -
First Commit Created: Dec 18, 2023 -
default image

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.