tech.hukurouo.com

ブログをNext.jsで作り直した
2021-01-18
# tukutta

ブログをNext.jsに置き換えました。

100点!
100点!

公式のチュートリアル題材がブログ制作だったので丁度良かった。これを改造して Nuxt/Content と同じくらいの使い心地にしていった。

やったのはこんな感じ。

  • TypeScript化
  • tailwindcssの導入
  • サイトデザインの再現
  • ページネーションの実装
  • OGP画像の設定
  • タグ機能、タグ検索の実装

今回便利になったのは、キャプション付きの画像を貼るための記述が簡単になったこと。今まではhtmlベタ書きだったが、md -> html 変換を自前でやるようになったのでこういうことができるようになった。

"https://i.imgur.com/V9RsSct.jpg"
画像テスト

↓ ビルドされる時に自動でhtml記法に変換される

<figure>
  <img src="https://i.imgur.com/V9RsSct.jpg">
  <figcaption>画像テスト</figcaption>
</figure>

画像テスト
画像テスト

他にも色々とやることはありそうなので、ぼちぼち改修していこ~