A Blog app built using Next.js 15, MDX (markdown), Prismjs and Tailwind CSS,. This app is static site that renders the markdown posts.
🔗 Links:
Checkout the complete code for this project here: https://github.com/thetechmaze/nextjs-mdx-blog
Checkout the figma file here: https://www.figma.com/community/file/1216616090937021365/free-blog-template-modern-creative-design
prismjs (syntax highlighting): https://prismjs.com/index.html
nextjs - mdx : https://nextjs.org/docs/app/building-your-application/configuring/mdx
tailwindcss typography plugin : https://github.com/tailwindlabs/tailwindcss-typography
🔧 Technologies Used:
- Next.js 15
- Tailwind CSS
- MDX
- Prismjs
🔔 Don't forget to subscribe!
If you found this tutorial helpful, please like the video, comment, and subscribe for more tech tutorials!
⏰ Timestamps:
00:00:00 - Demo
00:01:19 - Creating next app
00:03:54 - Creating ThemeProvider
00:09:14 - Creating the Header
00:18:56 - Modify tailwind.config,ts
00:19:37 - Creating the Footer
00:22:51 - Hero
00:28:48 - adding mdx
00:32:10 - creating MDX layout
00:37:46 - creating posts frontmatter in json format
00:41:25 - Adding Posts in Home Page
00:49:50 - Adding Posts in Blog Page
00:50:49 - Adding blog posts
00:52:05 - Adding Thumbnail in Blog Post
00:59:37 - Adding Syntax Highlighting
01:09:57 - npm run build