🚀

yusuke.sn Tech Stack

投稿日 •更新日

概要

このサイトの技術スタックについて紹介します。

フロントエンド

React

フロントエンドではReactを使用し、フレームワークとしてNext.jsを採用しています。基本的にはTypeScriptとCSS Modules + Sassで開発を行っています。

レンダリング

Next.jsのISR (Incremental Static Regeneration)は、ページのリクエスト時に背後でビルドを行い、以降のリクエストではエッジサーバーからキャッシュされたデータを返却します。

トップページのモジュールは動的なコンテンツを含みますが、この機能により静的ページとしてCDNにキャッシュすることが可能になるため、高パフォーマンスなサイトを実現できます。

関連ライブラリ

  • Recoil: グローバル状態管理ライブラリ
  • i18next: 多言語化フレームワーク
  • Remark: MarkdownをHTMLへ変換
  • SVGR: SVGをReactコンポーネントへ変換
  • Framer Motion: モーションライブラリ
    など

バックエンド

Hygraph

バックエンドではHeadless CMSのHygraphを使用しています。GraphQLを用いて型安全にフロントエンドと連携できることから採用しています。

Cloudinary

画像のCDNとしてCloudinaryを使用しています。ブログに使用する画像はCDNを介して最適化され、高速なレスポンスで表示されます。

関連ライブラリ

ホスティング

Vercel

フロントエンドのデプロイ先としてホスティングサービスのVercelを使用しています。Next.jsとの相性が良く、HTTPS対応や静的ファイルのエッジキャッシュなどの要因から採用しています。

動的OG画像

Vercel Edge Functionsを使用してブログのOG画像を動的に生成しています。コールドブートのない軽量なランタイムにより低レイテンシで動的コンテンツを配信できます。

関連ライブラリ