はじめに
今回はNext.jsを使ってQiitaとMicroCMSから記事を閲覧できるテックブログサイトを作りました。Next.jsの他にもtailwindやdaisyUI、turbopackなど新しい技術をたくさん使ったのでそれらの初感や気づきなどをまとめていきます。
作ったもの
こんな感じでQiitaとMicroCMSからapi経由で記事を取得しています。今回はこのサイト内から記事を投稿したり削除したりするような機能は特に作ってないです。当たり前ですがSSRを利用したので要素の表示速度がCSRの時と全然違いました。
新しく取り入れた技術と初感
Next.js
ReactのフレームワークとしてNext.jsを学習しました。ルーティング機能がデフォルトで用意されていたりページごとhtmlの生成タイミングを制御できるので、ある程度の規模のアプリケーションであれば必須になる気がしました。ただモダンな技術ゆえにバージョンによって結構書き方が違ったりするので、検索やaiを使う際はその辺りも指定してあげる必要があると思います。
Turbopack
Reactのみを使っていたときはviteで環境構築していましたが、今回はTurbopackを利用しました。そこまで規模が大きいものを作っているわけではないからかviteとの違いや恩恵はあまり感じませんでした。
TailWindCSS, DaisyUI
今まではChakraUIメインでデザインを作ってきましたが今回はTailwindを導入しました。ChakraUIに慣れていたのではじめはTailwindを使うメリットがいまいちわかりませんでしたが、cssの影響範囲を最小限にできたり、普通にcssを書くよりも記述量を減らせたり、コンポーネントに縛られないためカスタマイズしやすいなどのメリットがあるみたいです。今回はあまり使いませんでしたがDaisyUIを使えばbuttonやcardなどTailwindベースのコンポーネントを利用することもできます。
Vercel
元々firebaseでホスティングする予定でしたが、簡単で無料かつNext.jsと相性の良いVercelでホスティングしました。ただ商用アプリにする場合はfirebaseの方がコスパは良いみたいです。
QiitaとMicroCMSのAPI
記事取得の際に利用。ネットに情報がたくさん落ちていたり、docもわかりやすいので簡単に導入できました。
大変だったこと
今回はとにかく新しい技術への適応がとても大変でした。Turbopackでの環境構築から始まりSSRやSSGの理解、Tailwindでのスタイリングやvercelでのcicdなど慣れないことばかりでしたが公式docやネット記事を参考になんとか乗り越えれました(いまだに公式docには慣れないですが)。正直まだ全然使い慣れてるとは言えないので、これからも手を動かして技術に対する理解を深めていきたいと思います。
おわりに
新しい技術がたくさん出てきてなかなか苦労しましたが、色々触れて楽しかったです。
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします