NextJS 14 Markdown Blog: TypeScript, Tailwind, shadcn/ui, MDX, Velite,

Lets build a static blog site. We are going to utilize NextJS 14, shadcn/ui and Tailwind, Velite to read our content, MDX for writing our content allowing for custom components and TypeScript.

Follow along with the YouTube chapters as they will align to the GitHub commits.

This is my first long-form tutorial so any feedback is appreciated.

Links:

-----

Chapters:
0:00 Intro
2:12 Create Next App
4:23 Installing shadcn/ui (Stage 1)
13:35 Install and configure velite (Stage 2)
25:31 Site Header (Stage 3)
46:25 Mobile Menu (Stage 4)
1:00:36 Theme toggle (Stage 5)
1:09:09 Setup Blog Page (Stage 6)
1:25:29 Setup Post Page (Stage 7)
1:38:41 Custom MDX Components (Stage 8)
1:44:30 Syntax Highlight code blocks & MDX plugins (Stage 9)
1:52:57 Pagination (Stage 10)
2:06:55 Home Page (Stage 11)
2:16:25 About Page (Stage 12)
2:23:35 Dynamic Graph Image (Stage 13)
2:33:25 SEO and Favicon (Stage 14)
2:45:12 Site Footer (Stage 15)
2:49:55 Navbar z-index fix (Stage 16)
2:50:26 Deploying to Vercel

[Vaibhavdod-aka-Vibbs]

I was planning to rewrite my 2022 blog site and wanted a better eco-system of tech stack which worked for my use-case. This video really helped me set the core foundational code in my project - thanks @Jolly Coding. I specially dig the Velite - takes care of bunch of scripts that I would have to write 😀

[Art-yk]

Just a big thanks - I built a blog app using NextJS 12 years ago and wanted a quick tutorial to update and learn - you delivered 100%! You have a new Subscriber.

[revi_one]

I really like what you have done and also how you have it on your own site!
The video was very dedicated to be understandable with the styles and everything! very good ! congratulations!

[njorogekamau]

This is amazing content. I watched the full video first to make sure it had all the features I need for my personal blog, and the content exceeded my expectation. Thank you very much for the good work.

[patrickmotaung]

I'm so grateful I found this video

[theintjengineer]

Amazing content. Thank you.
I'll finally have a place where I can write my stuff and have them publicly available, instead of just keeping them as notes on Notion haha

Thank you, Jolly

[AdityaThakurXD]

Thank you! I was looking for an updated course to build a blog. This was very helpful 🙌

[dellanmuchengapadare]

Hi man. thanks a lot for this one. I just used your repo to power my personal blog.

[Stellamr]

53:12 "And then I'm gonna want some children as well" 😂

[jasondavis]

This was very good. Thank you. looks like velite is the new contentlayer and it works really nice.

[staystealth]

fantastic video! was looking for an example of rendering markdown with nextjs. glad i stumbled across this

[bytadit]

thanks for this incredible tutorial, please continue this tutorial series for creating dynamic table of content

[gfsaliev]

You're doing a great job! This is a great video, thanks for creating it.

[bitWatermelon]

Thanks for the video. Having migrated from content-layer, I have been looking for an alternative to getting types with my markdown. ✨✨

[IMBODavid]

Excellent work !! Thank you very much !

[digitalsahara]

Hi there, fantastic video, really love the way you explain things are you able to do a breakdown on how you created the JollyUI? would love to learn more about the architecture and creating reusable components for design systems

[suvaranjanpradhan-sf]

Adding Search and copy code button would be great. But it is good by the way.

[lipatrick-fl]

that's exactly what i need now, thanks

[stcode]

bro idk how but i wrote the same SiteHeader and no parent component interaction and my header <div container> is not centered and pushing to the left side so i added mx-auto and all worked but idk how you dont have the same problem with exactly de same code

[KamalSingh-zool]

Great work, can we add table of contents to it on side? Which is dynamically generated?