I rebuilt Blog with Next.js

tl;dr

I rebuilt my blog with Next.js. When I try Next.js in hobby project, I was impressed at how good developer experience at Next.js is. (see my tweet)

That's the reason why I choose Next.js to rebuild my blog quite seriously.

New Grads

Three months have passed since I worked as a software engineer, which I wanted to be.

All colleagues in my team are positive to teach me how to work, kind, and also good engineers. There were no engineers around me when I was a university student, so it's fun to work with them.

Plus, our company lets us choose either WFH or going to the office. Yes, WFH is the best choice for me because I don't need to bear the painful commuting train! (FYI: Tokyo is notorious for its rush hour especially at morning).

Anyway, WFH made room for me to study something.

Study Low Layer

@Psychs, who I admire as an engineer, advised in his blog that we should be good at some low layer things. I agree with his opinion. So I started to learn git from scratch, implement hash map in Rust, and implement TCP from scratch.

Also, I was pretty interested in Algorithm and Data Structure because ADS(Algorithm and Data Structure) is the frequently asked topic in the interview of big tech companies.

Algorithm and Data Structure

The more deeply I learn ADS, the more I want to share the information of ADS. Creating an app based on ADS (like Boggle I made) would be good to share the information you learned.

Writing a blog post is also a helpful way to share information. For instance, using a monotonous stack is one of the most elegant solutions. Binary Indexed Tree, Segment Tree are also sophisticated. I want to share such information.

Let's Build Blog

So I decided to write technical posts. In technical writing, I think what matters is below.

1. have syntax highlight
2. have a mathematical symbol (like Tex)

Fortunately, there are so many great libraries to achieve the above things in the npm world.

From the developer's view, I love to use Tailwind.CSS and Next.js because these speed up developing. Arranging things like Babel, TypeScript, Webpack, and deployment is just annoying for personal development. Next.js and its examples exclude such troublesome jobs. Next.js offers JSX, TypeScript, Built-in-CSS-Modules, API endpoint, and many useful functions (like getStaticProps and getServerSideProps) in one package.

From the user's view, using SSR is crucial. Minimizing client-side scripts allows us to use cache in CDN, which hugely increases user experience (If you use Cloudflare or Fastly, it might be a production-ready site). The core concept of Next.js is SSR.

Mathematical Symbol

You can write mathematical symbols. I am using remark-math.

Syntax Highlight

I am using highlight.js.

You can write TypeScript.

export class TrieNode {
  key: string | null;
  children: {
    [key: string]: TrieNode;
  };
  end: boolean;
  constructor(key: string | null) {
    this.key = key;
    this.children = {};
    this.end = false;
  }
}

You can write Python as well!

class Bit:
    def __init__(self, n):
        self.size = n
        self.tree = [0] * (n + 1)

    def sum(self, i):
        s = 0
        while i > 0:
            s += self.tree[i]
            i -= i & -i
        return s

    def add(self, i, x):
        while i <= self.size:
            self.tree[i] += x
            i += i & -i

Image Optimization

This blog uses Cloudinary in order to serve responsive images. I built rehype-cloudify by myself to exploit the full performance of cloudify in markdown files.

at Ebisu

I really like to take photos, and I'm quite happy to show you guys the beautiful photos.

Conclusion

Thank you for reading my terrible English post. If you are a native speaker, let me know if there are grammar errors!