## はじめに

技術的なアウトプットをしたり、メモを残したりできるような何かがほしいな〜と思い、Next.jsで作ってみた。
作る上で満たしたかった要件は以下の通り。
-   シンプルなUI/UX
-   Markdown形式で記事を編集・管理できること
-   なんか色々カスタマイズして遊べること

## 使った技術

### Next.js

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

### TypeScript


[公式](https://www.typescriptlang.org/)にあるとおり、
`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でブログを作りました。
今後は技術的にやってみたことや実装メモなど、気ままに書きたいものを書いていこうかなと思います。

Posts

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