Hello World, This is how i build my blog site with Nextjs and MDX

---

Hi, Welcome to Bar_Dev Blog. This is my first blog post on this site and next time i will post more about programming, computer networking, or some stuff i interested in.

Since first time i build my portfolio site, i've been wondering "why would someone visit my site?" and after visiting so many portfolio sites, i found several answer about it:

• The sites is owned by famous people.
• The sites is very good and some people use it as inspiration to build their own.
• The sites has some resource/content like blog post or course.

And after concluding some of the answer, i realize i'm not famous and my portfolio sites is very simple. So i started thinking to integrate my personal sites with a blogging site.

I started thinking about moving my portfolio to platform like Blogger and i found a way to customize the look. but after seeing the xml code...

WHAT THE HELL IS THIS. Why i do need to maintain 4000 lines of xml whenever i need to change something.

Ok, maybe Blogger isn't my thing, so i started to find something else. and i just realize my portfolio sites it's not seo friendly, because i use Vite + React which is csr (Client Side Rendering) and at that time without so much thinking, i migrate my site to Next.js. This is why my option must integrate with Next.js.

I started to searching about how to create blog site with Next.js. My first solution is by using Git Based CMS. You may ask, what is Git Based CMS? from what i know after trying some of those, I think Git Based CMS is a tools that integrate Rich Text Editor(many of them use Markdown) with your version control (Git). So If you save changes from your editor it, the CMS will trigger git commit and push, which is will trigger action from your hosting provider to rebuild your site.

At first, I think Git Based CMS is something i need, but after trying to integrate it, i feel too many configuration just for abstraction so i didn't touch raw Markdown(MD). I'm thinking why can't i just use Markdown for my blog instead of this?

After several search, i can do raw Markdown for that, even better with MDX. If you may ask again, what is MDX? MDX is basicly Markdown with support of your lib components(in this case react). So i could create interative components in the middle of the post like this one.

Because Next.js have an official support for MDX, the setup process is pretty straightforward, just follow the instruction from the official documentation and you're good to go. And because of official support, you have opionated way to stucture your post (using app/pages router).

After all of that, i think some of the technical problem are solved. The next problem is how do i make the best contents for my site, well i think it's harder than choosing tech stack for this project.

Thank you for reading this post till end, see ya in the next post!