はじめに
今回Next.jsのApp Routerを使ってQiita・microCMSからデータを取得し閲覧できるアプリを作りました。
アプリ紹介
ホーム画面にはQiita、ブログ記事が4つずつ表示され「もっと見る」ボタンを押すことで、それぞれの記事をさらに表示し、各記事を選んで詳細を見ることができるようになっています。
使った技術
| 名前 | 説明 |
|---|---|
| 【使用言語】 | ・Typescript |
| 【フロントエンド】 | ・Next.js (UI構築) ・Tailwindcss（スタイリング） |
| 【バックエンド】 | ・Next.js (App Router) |
| 【デプロイメント】 | ・Vercel |
| 【テスト・CI/CD】 | ・Jest（ユニットテスト） ・Github Actions（CI/CDパイプライン） |
| 【その他】 | ・Git（バージョン管理） |
各画面紹介
ホーム画面
ホーム画面では個人記事、ブログ記事を各４つずつ表示するようにしています。
個人記事はQiitaから、ブログ記事はmicroCMSのAPIからそれぞれISRでデータを取得しています。見た目はdaisyUIのカードコンポーネントを利用。
それぞれの記事から詳細内容に画面遷移できます。
記事一覧画面
ホーム画面の「もっと見る」ボタンから個人記事、ブログ記事それぞれの一覧画面へ遷移。
個人記事はデータ取得量が多いことからプリフェッチで全てのデータを取得しています。
それぞれページネーションも実装。またこちらでも各記事の詳細画面に遷移することができます。
戻るボタンで1つ前の画面へ遷移、タイトルクリックでホーム画面へ戻ることができます。
工夫した点
１ 初期画面は表示遅延しないようにデータ取得はISRで実装
Next.jsの特徴を活かして即時表示されるように事前に取得したデータを表示したいことから、ISRで実装しました。
２ ページネーション実装
大量にあるデータを1画面に表示するとスクロールする手間が増えることからページネーションで記事を表示するようにしました。
３ Qiita記事の「もっと見る」を押す前にデータをプリフェッチ
データ取得による遅延を防止するため大量にあるQiitaの記事を前もって全て取得したいと思いました。そのため今回はReact QueryのprefetchQueryを使ってデータ取得しキャッシュ利用できるようにしてみました。
大変だったところ
１ ルートシステム
今回はApp Routerのみで実装しましたが、Next.jsはApp RouterのほかにPage Routerというルートシステムがあり、混在もできてしまうことからある程度のルールを決めないと混乱を招く気がしました。
実装中も知らぬ間にPage Router用のドキュメントを見て実装してしまっていたり、個人開発で慣れないうちはどちらかに絞って実装した方が良さそう。
２ データ取得の仕方
APIでのデータ取得の仕方がSSRをはじめ、SSG、ISRなど様々できることからどのように取得するのか迷いました。でもそれが面白さでもあったりもしました。
３ 画像取得
今回60を超える記事分の画像を取得するとデータ量が多くなることから実装はしていませんが、URLから画像取得も試みました。前回作成した位置情報アプリの画像処理と違ってURLから画像へ変換する流れの理解に苦慮しました。
気づき
最初はNext.jsって何？という感じでNext.jsのことを全く知りませんでした。とりあえず新しい技術を習得できるワクワク感でいっぱいでした。
はじめにudemyのハンズオンを行っていて、何となくは理解できたけどこれを使いこなせるようになるのか？とReactを学び始めた時と同じ気持ちがありました。でも既に個人開発で調べながら実装できた経験があったので、更に高速表示できる箇所が増える楽しみな気持ちが勝っていました。これも今まで個人開発を続けてきたからこその気持ちの変化だと思います。
今回DockerでRailsも環境構築して、Next.jsのRoute Handlerの記述と比べながら進めました。記述量が少なくてもいい感じに動いてくれるRailsの特徴を確認できた一方で静的型付けのTypescriptの快適さに慣れていたため、動作確認しないとエラーを検知できないもどかしさも今だからこそ思う感覚です。
主となる目的はアプリを完成させることではなく、理解することなので様々試したい挙動を確認しながら、遊び心をもって進められました。作ることも大切ですが、こういう気持ちをもって作ることで、何でこの記述？こういうことはできないの？といった疑問も生まれ、そういう感覚がより深い学びになり成長につながるのではないでしょうか。
今回も、個人開発でしか得られない成長を感じることができました。
これから
Next.jsをもっと使って個人開発することで更に深い学びにつなげたいと思いますし、Next.js以外の技術についても少しずつ学んでいきたいと思います。
また既に作成した位置情報管理アプリも学んだ技術を盛り込んでブラッシュアップしていきます。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼