Welcome to the first post in the my digital blog. If you are reading this, I am really grateful that you are spending time on visiting my website. Now let the journey begins then.

Trying NextJS for the first time

I heard from lots of people that I should give NextJS a try if I love ReactJS and to be honest, NextJS lives up to the hype and I actually love it (currently). So let see what are the problems that NextJS trying to resolve for React developer:

• When using React, there is a huge chance that you have to write some server-side logic to connect you React app to the database.

• You do not want your app depends entirely on browser to compile everything, instead you want to ship as little JavaScript code as possible to speed up rendering process

• Dealing with SEO in React is quite painful because React is client-side rendering that means some of contents will be missed from search engine bots because on initial page load HTML will be served with little or even no content until you are able to fetch the JavaScript. So you may want to pre-render some pages for performance and SEO making you want to use server-side rendering ( because your top priority is that the content and metadata is available first on page) instead of client-side.

This is some of the huge advantage from NextJS that I'm experiencing so far:

• Providing you a nice routing system (literally based on your folder structure without any configuration)
• Pre-rendering all page content, providing both static-site-generation (SSG) as well as server-site-generation (SSR) at the same time
• Supporting Built-in CSS, Sass and pre-optimized Image on the page
• Also providing API routing system for building API endpoints

Trying MDX for the first time

If you are a developer, Markdown (MD) is not something that unfamiliar to you. I myself use Joplin everyday to take notes which are rendered in Markdown format. If you knows about Markdown, you can tell that the way everything got rendered (from heading, to link tag, img,...) is just similar to HTML format and in fact, you are actually able to transfer a Markdown file into a website by using some framework out there and MDX is one of them.

1## This is the first example
2
3Because I feel *bored* so I created **this** website to get myself out of the lazy
4
5---
6
7New things that I want to learn in 2022:
8* Learn more about [hardware](https://example.com) stuffs
9* Improve my `competitive` [programming](https://example.com) skills
10* Learning more about *networking*
11
12A ![funny image here](./image.png)

Translate to an HTML page:

1<h2> This is the first example</h2>
2<p>Because I feel <em>bored</em> so I created <strong>this</strong> website to get myself out of the lazy</p>
3
4<hr/>
5<p>New things that I want to learn in 2022:</p>
6<ul>
7    <li>Learn more about <a href="https://example.com">hardware</a> stuffs</li>
8    <li>Improve my <code>competitive</code> <a href="https://example.com">programming</a>] skills</li>
9    <li>Learning more about <code>networking</code></li>
10</ul>
11
12A <img src="./image.png" alt="funny image here"/>

To be honest, If you are like me (using MD frequently) translate it to HTML is quite easy. But let ask your friends, or someone who don't usually doing web dev much, which version is more readable? In fact, if you tell your friends, who know nothing about MD, try to learn some basic features, they can write the whole blog for you.

I will guide you to create and custom a beautiful page with MDX in my next post.

Trying ChakraUI for the fisrt time

CSS Framework is quite similar to each other. ChakraUI is components css framework which basically means that they provide you some components, you understand each components by seeing the docs and follow their rules. There are some nice things about ChakraUI like being able to quickly create custom components, get function for switching between light-mode and dark-mode. I will give you some more in depth comparison here.

Summary

Will I recommend you to follow this stacks that I am using currently? Not quite. Blog should be light-weight and easy to maintain for a long term. You don't need to use a lot of tools at the same time just to create some information on the Internet and later on, you don't want to keep updating your packages that may break your current components on the website.