I wrote a new blog using Next.js App router
Tags: webdev, nextjs, react, blog
Published: 2024-05-16 16:11:07

Before I dive into the development journey of my new blog, you might want to check it out first at [my blog](https://zhangyu.dev).

Back in 2020, React introduced [**Server Components**](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html). I was amazed by the possibility of writing asynchronous components.

Writing async components isn't groundbreaking per se; there was a short-lived framework before that used JSX syntax and allowed async components even on the client side.

What was novel, however, was React's support for async components, even though they could only run on the server. At that time, there wasn't a stable framework to leverage this feature. By coincidence, a new project last year required using `Next.js`. On my recommendation, we adopted the official `App Router`, seamlessly integrating **React Server Components**.

To master **React Server Components**, I decided to rewrite my blog using the `App Router`. Previously, my blog was built with `Astro`. Here’s a [preview of the old blog](https://blog-git-astro-v3-723156735.vercel.app/).

My requirements for the new blog were:

1. Fully utilize the `App Router` and **Server Components** to optimize performance.
2. Adopt the latest and cutting-edge technologies.
3. No backend services.
4. Make it as visually appealing as possible.

Regarding the first point, **Server Components** performed admirably.

![image-20240516231706718](https://cdn.jsdelivr.net/gh/zhangyu1818/blog@files/files/image-20240516231706718.png)

For the second point, I am currently using:

1. [TailwindCSS](https://tailwindcss.com/) — Needs no introduction.
2. [React Aria Components](https://react-spectrum.adobe.com/react-aria/components.html) — Not `shadcn/ui`, nor `radix-ui`.
3. [@tabler/icons-react](https://tabler.io/icons) — Over 5k icons, simply astonishing.
4. [shiki](https://shiki.style/) — Updated, more powerful syntax highlighting.
5. [MDX](https://mdxjs.com/) — Write `React` code within Markdown.

The highlights are `MDX` and `shiki`. I aim to include as many code examples as possible in my posts, allowing readers to interact with them. `shiki` supports numerous [plugins](https://shiki.style/packages/transformers) like `diff`, `focus`, `highlight`, and the best one is [`twoslash`](https://shikijs.github.io/twoslash/), which makes code blocks more user-friendly.

`MDX` and `shiki` are a match made in heaven. All these effects can run server-side without bundling any `js`.

For the third point, I employed a novel approach:

**Using GitHub Discussions as the Blog Backend**

I haven’t seen anyone else using this method. I find it more blog-friendly than using **GitHub Issues**. It has several distinct advantages:

1. Permissions Management — Only the author can post content; others can only comment (unlike **GitHub Issues**).
2. Categories — **GitHub Discussions** allows multiple categories (again, unlike **GitHub Issues**).
3. Tags — Customizable tags for posts with adjustable colors.
4. Image Uploads — Pasting an image in the `Discussions` input box uploads it to GitHub automatically.
5. Comments — Complete commenting system from GitHub, including likes, replies, and mentions (with slight differences between **Discussions** and **Issues**).

Moreover, **GitHub** provides a robust `GraphQL API`, enabling blog development with any front-end technology, even a console app.

For the fourth point:

I studied **Bento** design on *Dribbble*, drawing inspiration from various Bento-style blogs.

Current missing features in my blog:

- RSS feed
- Animations
- More interesting Bento sections
- `shiki` and `twoslash` styles

---

If you previewed my [blog](https://zhangyu.dev) and found it appealing, you can visit my [GitHub repository](https://github.com/zhangyu1818/blog/issues). It supports one-click deployment and includes a simple forking tutorial.