はじめに
今回はじめてNext.jsを使用したアプリの開発をしました。
今まではReactとViteという組み合わせで作成することが多かったので、Next.jsに慣れておらず、苦戦しながらもなんとか作成をすることができました。
開発したアプリの詳細とNext.jsを使ってみた所感を共有したいと思います。
アプリのご紹介
概要
Qiita と MicroCMS の API を利用してブログや記事を掲載するサイトです。
使用している技術スタック
- 環境
Next.js: v14.2.6
firebase: 10.13.0
- 言語
typescript: 5.3.3
- ライブラリ
react: 18.2.0
react-hook-form: 7.52.2
react-markdown: 9.0.1
react-dom: 18.2.0
- CSS
tailwindcss: 3.4.10
daisyui: 4.12.10
- Test
testing-library/jest-dom: 6.1.5
testing-library/react: 14.1.2
types/jest: 29.5.11
実装機能
トップ画面
Qiitaに 掲載中の記事とmicroCMSで作成したブログ記事をAPIで取得してきて抽出してきた中から4記事を表示させています。
Qiita記事
各記事に配置している「詳細を見る」ボタンを押すと、Qiitaに掲載中の記事へ直接遷移します。
ブログ記事
各記事に配置している「詳細を見る」ボタンを押すと、microCMS上で投稿したブログ記事をAPIで取得して画面へ表示します。
反省点
Next.js14を使用してアプリを作成してみましたが、appルーターでのディレクトリ構成を考えるのが少し難しく感じました。
appルーター配下にフォルダを作成し、そこにpage.tsxを作成することでルーティング設定ができるのですが、ページが増えてきたり同じようなページがある場合はどうすればベストな構成にできるのかがわかっておらずappの中のディレクトリを無駄に作成してしまった感じです。
その部分を次のアプリ作成までに整理して、学んだことを活かしていきたいと思います。
さいごに
Next.jsを使用できることでReactを使ってクライアントサイド中心のアプリを作成している以上に作れるアプリの幅が増えると思っています。
実際に大規模で複雑なアプリにも使用されることがあるようなので、次はNext.jsのいいところをもっと活かせるようなアプリを作成してみたいと思います。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼