Blog Template with Nextjs 14, MDX, TailwindCSS and Shadcn UI

Welcome to my blog template. Built using Next.js 14, MDX, Tailwind CSS, and ShadCN.

Demo Link

Overview

In this tutorial we will build a Blog template by combining two major technologies. We will use Nextjs and MDX. You will also learn in this guide:

• Blog with Nextjs
• MDX with Nextjs
• Blog template built using NextJS 14, Tailwind, Shadcn and MDX

Features

• Next Metadata: Enhance SEO and manage metadata efficiently.
• Gray-Matter: Parse front matter from markdown files seamlessly.
• next-mdx-remote: Render MDX content with dynamic imports.
• Pagination: Navigate through blog posts with ease.
• Dynamic Routing: Create dynamic routes for your blog posts effortlessly.
• Responsive Design: Mobile-friendly layouts using Tailwind CSS.

Getting Started

• Node.js
• npm or yarn
• Clerk and Supabase installations must be done, there must be api keys in the .env.local file.

Clone the repository:

git clone https://github.com/Ali-Onar/nextjs-mdx-blog-template.git

Install dependencies:

npm install
# or
yarn install

Run the development server:

npm run dev
# or
yarn dev

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

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.