はじめに
こんにちは！POMです。
普段はWebアプリ開発エンジニアとして働いており、
個人的に今年からJISOUに参加し、ReactやTypeScriptの課題や個人開発に取り組んでいます！
先日、個人開発した際の記事はこちら↓になります。
ありがたいことに多くのいいねをいただいております！
今回開発したアプリ
今まではReact×TypeScriptをメインとしてきましたが、
今回からNext.js（App Router）を使って、
様々なレンダリングパターンの学習を兼ねた「掲示板アプリ開発」を行いました！
▼ ソースコードはこちら
ちなみに、こちらのアプリ開発をする前に、インプットとしてJISOU代表の渡邊さんの記事にも取り組んでいます！
機能
一般的な掲示板アプリに考えられるようなシンプルな機能を実装しております。
１. 投稿一覧（SSR）
こちらはリアルタイムに反映したい、かつ頻繁に更新される内容なので、SSRで実装しています。
２. 投稿詳細（ISR）
定期的に更新される内容と考え、ISRで実装しています。更新ボタンを押すと、新しい内容が反映される仕組みです。
３. 新規投稿（CSR）
こちらはクライアント側の操作も伴うので、CSRで実装しています。
４. カテゴリ一覧（SSG）
内容が固定的なものなので、SSGにしています。
使用技術
| 種別 | 技術 |
|---|---|
| フレームワーク | Next.js 16 (App Router) |
| 言語 | TypeScript |
| ランタイム | Node.js |
| UI ライブラリ | React 19 |
| コンポーネント | shadcn/ui |
| スタイリング | Tailwind CSS 4 |
| フォーム | React Hook Form + Zod |
| ORM | Prisma 7 |
| DB | Supabase (PostgreSQL 16) |
| テストフレームワーク | Vitest |
| DOM テスト | React Testing Library |
| ホスティング | Vercel |
| CI/CD | GitHub Actions |
工夫したこと
今回のディレクトリ構造として、下記記事を参考にしながら
Feature-based Patternで実践してみました！
app/フォルダ配下にまとめてしまうよりも、
features/フォルダ配下に機能別としてファイルを配置することで、
どこにどの実装があるのか？も探しやすく、
一定のまとまりがあるため、不具合があった際にも原因箇所を追うスピードが速くなったと感じました。
おわりに
今回はNext.jsを使って簡単なWebアプリ開発をしてみました。
まだまだ実装をしていて慣れない部分もありますが、
地道に手を動かしながら取り組んでいきたいと思います。
次回からは、Next.jsでもう少し大きい規模の個人開発をする予定です！
参考記事
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼