Next.js + MDX Blog Website

Sign up ZEGOCLOUD for 10,000 free minutes: https://bit.ly/3R4jeSz
Find out more about ZEGOCLOUD: https://bit.ly/3R7hSXc
How to build video call app: https://bit.ly/3qVAAXe

Today we are going to create a next.js app. It will be a blog website. A simple blog website using Next.js +MDX. We will use "next-mdx-remote" & "gray-matter" to parse MDX & show it to the website. Besides, we will add filters, pagination & code syntax highlighting to the project.

♥ Support the Channel:
☕ Buy Me A Coffee: https://www.buymeacoffee.com/shaifarf...

🔔subscribe and turn on the notification bell.
👉 source code: https://github.com/ShaifArfan/next-md...
👉 Live Preview: https://next-mdx-simple-blog.netlify....

Follow Shaif Arfan 👇👇
Instagram:   / shaifarfan08  
Facebook:   / fb.shaifarfan08  
Twitter:   / shaifarfan08  

▶ Also Watch :
HTML CSS Portfolio Project:    • HTML CSS Portfolio Project | Responsi...  
One Page HTML & CSS Project:    • One Page Full Website Project For Pra...  
HTML & CSS Landing Page :    • HTML & CSS Website Landing Page | Fro...  
Mini Project for HTML & CSS :    • Responsive Website With HTML & CSS | ...  
How To Make A WordPress website:    • How To Make A Professional Website - ...  

▶ Some useful Playlist :
HTML & CSS:    • HTML & CSS  
Vanilla JavaScript :    • Vanilla JavaScript  
Frontend Mentor Challenges:    • Frontend Mentor Challenges  
30days30submits Challenge:    • 30days30submits  

🌐 Join The Community :
Our website : https://webcifar.com/
Facebook Page :   / webcifar  
Facebook group : http://bit.ly/fb-group-webcifar
Instagram :   / web_cifar  
twitter :   / webcifar  
GitHub: https://github.com/WebCifar & https://github.com/shaifarfan

⏰ Timestamps:
00:00:00 - Intro
00:01:08 - Project Preview
00:02:39 - Sponsor
00:04:07 - Next.js Setup
00:14:11 - Hero Section
00:25:39 - Blog List
00:52:02 - Single Blog Post
01:26:25 - Code Syntax Highlight
01:35:48 - Tag Filter
01:52:02 - Pagination
02:08:02 - Adding image to Blog
02:14:16 - Outro


#webcifar #nextjs #reactjs