はじめに
Next.jsでオリジナルの技術ブログを作成して公開してみました。
作成したものや得た知見、今後の展望について紹介していければと思います。
技術ブログについて
QiitaとヘッドレスCMS（今回はMicroCMSを利用）からブログ一覧を取得しています。
実際に作成したもの
トップページ
QiitaAPIとヘッドレスCMSから取得した最新の記事一覧を表示する
Qiita記事一覧
Qiitaから取得した記事一覧を表示します。
各カードの要素からはQiitaの記事に直接飛べるようになっています。
ヘッドレスCMSの記事一覧
CMSから取得した記事一覧を表示します。
ヘッドレスCMSの記事詳細
CMSから取得した内容を表示します。
設計・技術について
技術スタック
-
言語
typescript: 5.8.3 -
フレームワーク・ライブラリ
Next.js: 15.3.3
react: 18.3.1
react-dom: 18.3.1 -
CSS
tailwindcss: 4.1.8
daisyui: 5.0.43
画面遷移図
学んだことや感想について
ReactとNext.jsの違い
今まではReactで開発してきましたが、今回はNext.jsでの開発でした。
基本的な構文は変わらず直感的に移行できましたが、違う部分について記録します。
ルーティングについて
ReactのルーティングはReactRouterを利用していましたが、Next.jsではAppRouterでルーティングを行いました。
サーバーサイドレンダリングについて
今まで作成したReactのアプリケーションは外部APIとの通信時に長いローディングが挟まり、実運用するにはユーザー体験的に難しいところがありました。
Next.jsにはサーバーサイドレンダリングにより外部APIの実行結果をキャッシュ機能できる機能があり、外部APIを呼び出す画面での結果表示が高速になりました。
今後やりたいこと
今後Next.jsでの開発をしていく上で、更にやりたいことについて記録します。
Next.jsのCSRとSSRの使い分けをできるようにする
Next.jsは明記することでクライアント側での描画を行う機能があります。
調べたところ、CSRではuseStateを利用できるようになるとのことです。
今回の技術ブログにはその機能は必要なかったのですが、今後WEBアプリを作る上では適切に使いこなせるようになりたいです。
感想
Next.jsによってサーバーサイドでの処理をできるようになったことで、今まで以上にアプリの幅が広がると感じました。
今後もいろいろな物を作ってみたいです。
JISOUのメンバー募集中
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼