πŸš€

yusuke.sn Tech Stack

Posted β€’Updated

Overview

This article introduces the technology stack used in this website.

Frontend

React

The frontend uses React and Next.js as a framework. Development is mainly done with TypeScript and CSS Modules + Sass.

Rendering

Next.js' ISR (Incremental Static Regeneration) builds the page in the background on the first request and returns cached data from the edge server for subsequent requests.

The top page module contains dynamic content, but this feature allows it to be cached as a static page on the CDN, resulting in a high-performance site.

Related Libraries

  • Recoil: Global state management library
  • i18next: Internationalization framework
  • Remark: Converts Markdown to HTML
  • SVGR: Converts SVG to React components
  • Framer Motion: Motion library
    etc.

Backend

Hygraph

The backend uses Hygraph from Headless CMS. It is adopted because it can be integrated with the frontend in a type-safe manner using GraphQL.

Cloudinary

I use Cloudinary as the CDN for images. The images used in the blog are optimized via CDN and displayed with fast response time.

Related Libraries

Hosting

Vercel

I use the hosting service Vercel as the deployment destination for the frontend. It is adopted due to its compatibility with Next.js and factors such as HTTPS support and edge caching of static files.

Dynamic OG Images

I use Vercel Edge Functions to dynamically generate OG images for the blog. Low-latency dynamic content can be delivered with a lightweight runtime without cold boot.

Related Libraries