Building a Blog with Next.js

frontendnext.jsreactmarkdown

Summary

The blog post details the creation of a blog using Next.js, TailwindCSS, and MDX, highlighting the choices due to their respective strengths in routing, styling, and content handling. Key features implemented include dark mode (albeit with noted need for enhancement in future), syntax highlighting using Shiki and rehype-pretty-code, and a dynamic table of contents. Additional functionalities include RSS feed, SEO optimization, generating a sitemap, and improved navigation through category/tag-based post search, pagination, and infinite scroll. The design utilizes DaisyUI's color system, incorporating a range of semantic colors to define various elements consistently throughout the blog.

After about one month of development, I finally finished building my blog.

For this project, I chose to use Next.js, TailwindCSS, and MDX. Next.js is mostly for routing, SSR, and SSG. Tailwind allows me to style my components quickly and efficiently. MDX is great for adding custom content that is hard to achieve with Markdown.

Design

I followed DaisyUI's semantic color system for my blog's design, with the following colors:

  • Primary
  • Secondary
  • Accent
  • Neutral
  • Info
  • Success
  • Warning
  • Error

Features

Dark mode

Implemented through media queries and TailwindCSS.

However, the dark mode color scheme is not as good as the light mode, so I still need to improve it in the future.

Syntax highlighting

Implemented with Shiki and rehype-pretty-code

def some_function():
    print("This is a test function")

Table of contents

Implemented by finding all the headings in the post and generating a list of links. (source code)

Latex Support

Implemented with KaTeX

f(x)=∫−∞∞f^(ξ)e2πiξxdξf(x) = \int_{-\infty}^{\infty} \hat f(\xi) e^{2 \pi i \xi x} d\xi

Other features

  • RSS feed
  • SEO
  • Sitemap
  • Posts search by categories and tags
  • Pagination and infinite scroll
  • GitHub flavored markdown