Next x Tailwind x Vercelでブログ作成

最近 TailwindCSS を使う機会があり開発体験がめちゃくちゃ良くて楽しくなっちゃったので、Next.js + TailwindCSS でブログを作ってみました。よくある構成で Vercel にデプロイするやつですね。少し調べたらこんな感じで作っている方がいたので参考にさせていただきました。見た目とかも好みだったので寄せてみましたが怒られないか心配です。。。

大枠の流れ

大枠の流れは上記のブログの方と同じで、Next.js 公式のスターターキットを使いました。必要な設定はしてくれているので便利ですね。しかも初めから TailwindCSS が入っているので文字通りの zero config で開発スタートできてニンマリです。また、Zenn 公式からマークダウン用のプラグインが提供されていたのでそちらを使用してマークダウン記事のスタイリングを行いました。本当にいいんですか？レベルで楽勝に骨組みが出来上がっちゃいました。

あとはできるだけシンプルにしたかったので、画像とかは表示せずに見た目を整えたりします。無駄なノイズは消し去って記事と SNS へのリンクを追加したりですね。こだわった点はシンプルにすることぐらいで、今見ていただいている見た目ができるまで 3h ほどです。すごい。あとは、リンターとかコードフォーマッターを入れないと気がすまないので、ガチガチのルールを設定しました。

Vercel へのデプロイは GitHub と連携するとすぐに完了します。あとは独自ドメインを設定したかったので、お名前ドットコムでこのドメインを購入して、Vercel に設定して完了です。 1h ほど反映に時間かかりました。

という感じで所要時間 4h ほどでこのブログの完成です。後は技術ブログ以外も載せられるように note の API から記事を持ってきてタブで管理したりするかなどですかね。あまり記事意外の情報が多いのは好きじゃないので機能をモリモリにする予定はないです。

Next.js と TailwindCSS の組み合わせは書いててまじで気持ちがいいです。初心者の方とかこの構成でブログ作ると良い勉強になるかも？しれませんね。やってみてください。