はじめに
今回はNext.jsを使用したアプリの制作を行いました。これまではReactとViteを使用してアプリを制作することが多く、今回が初めてのNext.jsでの制作になります。
アプリについて
使用技術
- 環境
Next.js: 15.1.7
- 言語
typescript: 5.2.2
- ライブラリ
react: 18.2.0
- CSS
tailwindcss: 4.0.9
daisyui: 5.0.0-beta.8
- Test
testing-library/dom: 10.4.0
testing-library/jest-dom: 6.6.3
testing-library/react: 16.2.0
types/jest: 29.5.14
types/node: 20.8.10
types/react: 18.2.33
types/react-dom: 18.2.14
- デプロイ
Vercel
実装機能
TOP画面
Qiitaに投稿された記事とmicroCMSで管理しているブログ記事をAPIで取得し、4記事をピックアップして表示しています。
Qiita記事画面
Qiitaの記事一覧を16記事 表示し、いいね数と閲覧数をカード上に表示 しています。
クリックすると、Qiitaの実際の記事ページへ遷移します。
ブログ画面
microCMSで投稿したブログ記事を12記事表示しています。
Qiitaと同様に、クリックすると 記事の詳細ページ へ遷移できます。
工夫したところ
- ディレクトリ構成
以下の記事を参考にしながら、見やすく管理しやすいディレクトリ構成 を採用しました。
src
|
+-- app
|
+-- api
|
+-- components
|
+-- features
|
+-- libs
|
+-- public
|
+-- utils
|
+-- tests
- いいね数と閲覧数を表示
Qiitaの記事のいいね数と閲覧数が一目でわかるようにしました。
難しかったところ
今回一番苦労したのは、クライアントコンポーネントとサーバーコンポーネントの使い分けです。
-
最初の実装（失敗例）
はじめはすべてクライアントコンポーネント（CSR） で作成していました。
QiitaとmicroCMSのAPIをクライアント側で毎回取得 していたため、ページ遷移やリロードのたびにデータを再取得してしまい、表示が遅くなる問題 が発生しました。 -
修正後（成功例）
Next.jsのサーバーコンポーネント（SSR） を利用し、記事データをサーバーで取得し、ページ遷移時の負荷を軽減 しました。この修正により、ページ表示の速度が向上不要なAPIリクエストが減り、通信コストを削減できました！
成長を感じたところ
以前はuseStateを使うときに 「use client をつければOK」 という認識しか持っていませんでした。しかし今回の実装を通して、CSR・SSR・SSG・ISRなどのレンダリング手法の違い を理解できました。
またページのパフォーマンスを意識する視点 が身についたのも大きな成長ポイントです。最初にCSRで実装したときは、記事が4つ並んでいるだけなのに毎回データを取得していたため、表示速度が遅くなってしまいました。SSRに切り替えたことで、不要なリクエストを減らし、スムーズなUXを実現できました。
終わりに
今回のNext.jsを使った実装では、クライアントコンポーネントとサーバーコンポーネントの違いを意識することの重要性 を学びました。特にAPIのデータ取得とレンダリング手法の最適化 は、今後の開発でも活かせる知見になりました！
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼