はじめに
初めてNext.jsを使って、ブログ記事まとめアプリを個人開発しました。
SSR（サーバーサイドレンダリング） と CSR（クライアントサイドレンダリング） を組み合わせて、動的なWebアプリを実現しています。
主な機能
Qiita API連携
Qiita APIを利用して自分のQiita記事を取得し、一覧表示する。
記事タイトルをクリックすると、Qiitaの該当記事ページに遷移する。
microCMS連携
microCMSのAPIを叩いて、CMSで管理している記事一覧を表示する。
一覧から記事を選択すると、詳細ページに移動し、microCMSのAPIから詳細データを取得して表示する。
デプロイ
動的なアプリケーションを公開するため、Firebase App Hostingを利用してデプロイしている。
これにより、SSR/CSRのNext.jsアプリを手軽に公開できた。
使用技術
アプリケーション（フレームワーク・ライブラリ）
| 技術 | 用途 |
|---|---|
| Next.js | Reactベースのフレームワーク、SSR/SSG対応 |
| React.js + TypeScript | コンポーネント開発・型安全性 |
| Jest | ユニットテスト |
| DaisyUI | Tailwind CSSベースのUIコンポーネント |
| Tailwind CSS | ユーティリティファーストのスタイリング |
| microCMS | ヘッドレスCMSによるコンテンツ管理 |
バックエンド・インフラ
| 技術 | 用途 |
|---|---|
| Firebase App Hosting | 静的/動的サイトホスティング、CDN配信 |
開発・デプロイ・CI/CD
| 技術 | 用途 |
|---|---|
| Git + GitHub | バージョン管理・ソースコード管理 |
| GitHub Actions | CI/CDパイプライン・自動化 |
| Firebase CLI | デプロイメント自動化 |
| ESLint + Prettier | コード品質管理・フォーマット統一 |
アーキテクチャ概要
アプリ(Gif画像)
Qiita API連携
microCMS連携
はまったこと
- 構成を十分に理解していなかったため、FirebaseのHostingとApp Hostingの両方に誤ってデプロイしてしまった
- Firebase App Hostingへのデプロイ手順が難しく、何度も試行錯誤することになった
- microCMSは初めて利用するサービスだったので、API連携やデータ構造の理解に時間がかかった
投稿記事
【Next.js】Firebaseで、App Hosting/Hosting 両方デプロイしてしまった時の対処法
【Next.js】Next.jsをFirebaseのAppHostingでデプロイする
工夫したこと
- エラーが発生した際は、まずエラー内容をしっかり確認し、原因を意識的に特定するようにした
- AIに質問した後は、必ず公式ドキュメントも参照して理解を深めるようにした
- Jestのテストについては理解が浅かったため、サンプルコードを参考にしながら関連書籍を精読し、知識を補強した
今後について
基礎力を高めるために、JavaScriptはMDNや関連書籍を活用して学習を進めます。
Reactについても、公式ドキュメントや書籍を読み込み、より深く理解できるよう努めていきます。