Next.js + TypeScriptなブログをつくった

はじめに

技術的なアウトプットをしたり、メモを残したりできるような何かがほしいな〜と思い、Next.jsで作ってみた。
作る上で満たしたかった要件は以下の通り。

• シンプルなUI/UX
• Markdown形式で記事を編集・管理できること
• なんか色々カスタマイズして遊べること

使った技術

Next.js

ReactベースのSSR / SSGフレームワーク。

TypeScript

公式にあるとおり、
TypeScript is a typed superset of JavaScript that compiles to plain JavaScriptな思想でJavaScriptに静的型システムを提供してくれる素敵な言語。

Chakra UI

個人的に好きなstyled-systemベースなコンポーネントライブラリ。
単純に好きなので採用した。

Vercel

ホスティング先はVercelを利用。
静的サイトホスティングはもちろん、サーバーレスでの関数実行ができたり、デフォルトでSSG/SSR対応してるなどNext.jsとの相性がとても良くて嬉しいやつ。
あとはデプロイがめちゃくちゃ簡単。

PWA

静的ファイルのキャッシュ戦略など考えて遊びたかったのでService Worker対応&ついでにPWA対応しました。

その他やったこと

• webp対応
• Low Quality Image Placeholder対応
• Asset Compression
• Service Workerによるキャッシュ戦略
• フォントのサブセット対応
• など

今後やりたいこと

• 検索機能の実装
• キャッシュ戦略もうちょっと考える
• SEO対策（動的metaタグ生成）
• AMP対応
• 記事書く際の画像等のAsset Compressionの自動化
• 記事へのTwitter埋め込み等の対応

まとめ

Next.js + Typescriptでブログを作りました。
今後は技術的にやってみたことや実装メモなど、気ままに書きたいものを書いていこうかなと思います。