Next.jsとGraphQLで個人ブログを作成しました。
デザインから製作したこともあり二ヶ月以上かかってしまいましたがとりあえず公開することができてホッとしています（笑）
公開するからには何かしら記事を書かなければいけないのでこのブログを作ったきっかけや使用した技術などを記録として残しておこうかと思います。
ブログ作りたいなと思っている方の参考になれば幸いです。
きっかけ
アウトプットできる場所が欲しかった
最初のきっかけは日々、学んだこと・感じたこと・考えたことを残しておける場所が欲しかったことです。
技術的な記事を書く場所であればQiitaやZenn、それ以外でもnoteなどアウトプットできる場所はいくらでもありますが、もっと気軽に書ける場所が欲しいと思い作成しました。
個人開発したものをちゃんと運用してみたかった
今までも個人開発したアプリはありましたが自分で使って満足することが多く、もっと実務に近い形で運用したいと考えていました。 具体的にはGoogle Search ConsoleやGoogle Analyticsを用いたSEOの改善、Page Speed Insightsで計測されるスコアやCWVの改善などです。 比較的モダンな技術を使用したので、このサイトを運用した経験がいずれ仕事で活かせれば良いな（希望的観測）と思っています。
使用した技術
Next.js
最近はRemixやTanStackを使用したCSR onlyなReactも熱いですが、SSGで配信できるNext.jsがブログには向いていると思ったため採用しました。
デプロイ先はVercelです。
GraphQL
Facebook製のAPI向けクエリ言語
せっかく個人開発するならということで導入しました。
GraphQLはAPIのエンドポイントに対して以下のようなクエリでリクエストすることで
query getPosts {
posts {
id
title
}
}
このようなJSON形式のデータを取得することができます。
{
"data": {
"posts": [
{
"id": "xxxxxxxxxxxx",
"title": "Next.jsとGraphQLでブログを作った話"
},
]
}
}
取得したいデータの分だけクエリに追加すれば良いので、
REST APIのように不必要なデータが返却されたり、取得したデータで別のAPIにリクエストを投げなければいけないといった問題はありません。
今回はGraphCMSという記事のデータをGraphQLで取得することができるHeadless CMSを利用しています。
GraphCMSの使い方についても気が向いたらそのうち書きたいな〜と思っています。
Apollo Client
GraphQLクライアントにはApollo Clientを使っています。
Apollo ClientはuseQueryやuseMutationなど、GraphQL APIをシンプルに扱うためのhooksを提供しています。また、Reactive variableという変数を利用することでローカルデータの状態管理も行うことができ状態管理ライブラリとしての役割を担うこともできます。
実際、公式には「Apollo Clientはローカルとリモートの両方のデータをGraphQLで管理できる状態管理ライブラリ」と書いてあります。
Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.
今回は他に使用してみたい状態管理ライブラリがあったので、あくまでGraphQL APIからデータを取得する役割で利用しています。
Figma
デザインの作成にはFigmaを使用しました。
デザインに関してはほぼ素人ですが、Figmaは直感的な操作で使いやすくPhotoshopやXDなどよりも軽量で開発体験がとても良かったです。
その他
・Tailwind CSS（スタイリング）
・Valtio（ローカルデータの状態管理）
・Unified（マークダウンの解析・変換）
・Cloudinary（OGP画像生成）
課題
プレビュー機能
個人ブログなので必須ではないけど欲しい機能。
GraphCMSではプレビュー用のAPIも提供してくれているようなので追々実装したいと思っています。
ブログカード
テキストリンクを貼るとリンク先のページのアイキャッチ画像やタイトルなどが表示されるアレ。
リンクが押しやすくなり、その先のページがどんな内容なのか一目でわかるが良いなと思いました。
少し難しそうですがUnifiedが提供しているrehype-reactを使えばできないことはなさそう...
まとめ
個人のブログの割にはそこそこ良い出来になったのではないかと思っています。 まだ記事数が少なくTOPの記事一覧が寂しい感じになっているので、まずは記事を充実させていきたいです。
このブログについて何かあればTwitterでご連絡いただけると幸いです。