• やったことをまとめておく場所が欲しい
  • SNSや通常のブログは苦手なので、愛着が生まれるよう作ることにした
• 3Dプリンタを買い、STLファイルをつくることが増えてきたので、せっかくなら公開してまとめておきたい
• いろいろ技術面で試してみたかった

ので、ブログを作った。

構成

• Front
  • Framework: Next.js
  • UIライブラリ: ChakraUI
• Backend
  • Contentful
• ホスティング
  • vercel

作りたかったもの

• 記事を書ける
  • Markdownで書ける
  • タグ付けができる
• 作ったものをまとめておける
  • リンク貼れる
  • コメント添えられる
  • 写真貼れる
• 気が向いたら拡張できる

構築の流れ

Contentfulのガイドに沿って初期構築

自動的にある程度の形までは整えてくれるため、特筆する作業はなし

Contentful側にてContent modelの修正・追加

実施したのは以下のとおり

• 不要な項目の削除
• 本文がRich TextだったのでMarkdownのTextに差し替え
• 作ったもの記載用のContent modelの追加

Next.js側のコード修正

上記のContent modelに合わせ、以下の修正を実施

lib/api.tsのgraphQL Queryを修正

①不要になった項目の削除 ②タグを取得できるように、以下の項目を追加

contentfulMetadata {
    tags {
        id
        name
    }

③記事の初回公開日を取得できるように、以下の項目を追加

sys {
    firstPublishedAt
  }

④作ったもののデータを取れるように、fetch関数の追加

記事本文表示用コンポーネントの差し替え

lib/markdown.tsxはRich Text用のコンポーネントのようだったので、別途React-Markdownを入れて差し替え。 stringを渡すだけでMarkdownで表示してくれて楽だった。

UIの修正と作ったものの表示周りの修正

UIライブラリはMUI以外であればある程度なんでもよかったので、メジャーどころでNext.js 13でも使えそうなchakraを採用。 適当にコンポーネントを使っていって、色々整えた。

vercelにデプロイ

特に何も考えず、vercelの指示のままにデプロイ。 その後、Route53でドメイン取得し、ドメイン設定を行い公開。

所感

• Next.jsを初めて触ったが、ほぼ何も考えなくてもルーティングが形成されるのは楽だった
• 普段はCSRでの開発で、SSRを意識してなかったので、今回触れられてよかったのと、ちゃんとした理解が必要そうに感じた
• vercelが無料でできる＋Next.jsでは鉄板だったようなので使ってみて、個人用途ではかなり便利と感じている。
• vercelのSpeed Insight見てみたところあんまりよくなさそう（体感も遅い感じ）なので改善したい。多分情報の取り方に問題ありそう。
• Contentfulは手軽で柔軟性もあるが、Auto Incrementやデフォルト値の設定などができなさそう？なのがちょっと不満。エディタもバグりがちな気がする。
• Tailwind CSSもそういえば初めてだったが、簡単に整うという側面では嫌いじゃないかも。ただ、UIライブラリ側のstyleとの棲み分けしっかり考えたい感はある。
• React-markdownってMermaidとかも対応しているのだろうか。

今後の手直し

• タグ別のフィルタはかけられるようにしたい
• あんまり実質的な意味はないと思うが、フロント側の監視とか何か入れたい
• パフォーマンス改善
• CSSまわりの修正
• プロフィールページみたいなのは作るだけ作っておきたい