📖

Next.js App Routerでコミケのお品書きをまとめるサイトを作った

2023/08/12に公開

Next.js

個人開発

App Router

tech

概要

個人で制作していた、コミケのお品書きをまとめるサービスをNext.js App Routerで作り直しました。

https://oshinagaki.bmth.dev/

技術スタック

フロントエンド

TypeScript
Next.js v13 App Router
Tailwind CSS
Vercel
Prisma

バックエンド

Java
Spring boot
PlanetScale
JPA
Twittered

今回はReact Server Componentから直にデータベースにアクセスさせたかったのでAPIはありません。
なので、Spring bootはツイートの取得などのCron的な処理を行うために使用しています。
もともとのアプリケーションで使用していたものを一部改修してそのまま利用しました。

モチベーション

開発体験
今までのアプリケーションではボタン1つのデザインを変更しようとすると、全ページで書き換えが必要だったため、デザインの変更や機能追加が非常に面倒でした。
コンポーネント指向のReactが利用できることで、簡単にデザインを変更することができるようになり全体的にまとまりのあるデザインになりました。
CSSを変更するときはその変更がコンポーネント内で閉じているため、CSSのクラス名を考えたり、そのクラスの影響範囲を考えたりする必要が無いのも非常に楽でした。
パフォーマンス
Next.jsはSPAのようにページの状態を保持し、ページの遷移はJavaScriptでの差分書き換えで実現しているため、高速になり、ユーザーのストレスを軽減することができました。
また、従来は同じページを表示する際にも毎回データベースにアクセスしていたため、会期中に重くなることがありました。
Next.jsでは一度取得したデータはキャッシュされ、変更時はRevalidateTagを利用してOndemand ISRで再取得されるため、ほぼ全てのページが待機時間なしで表示されます。
あまりアクセスされることのないサークル情報ページについてはキャッシュされませんが、Server Componentでデータをフェッチすることにより、それ以外のページを先にユーザーに表示しSuspenseを利用してプレースホルダーを表示することができるため、最適なユーザー体験を提供することができます。(プレースホルダーはまだ未実装ですが)

こだわりポイント

スマホファーストのレスポンシブデザイン
スマホでも押しやすいボタンサイズに
ページネーションを採用し、1ページに表示する量を制御
ページ内リンクで目的のサークルを探しやすく
トップへ戻るボタンでリンクをたどりやすく
ページボトムに別ページに移動しやすいようリンクを設置

おわりに

実はこのアプリケーション、もともと1年前にピュアJavaで静的HTMLを生成する仕組みでプロトタイプとして制作し、その後半年前にSpring bootでちゃんとしたWebアプリケーションとして完成させていました。
しかし、ここ最近フロントエンドの技術を調べているうちにApp Routerをどうしても試したくなってしまい、作り直すことにしました。
保守性を考慮しなければSpring bootどころかプロトタイプの時点で機能面は全て完成していたので全く作り直す必要はなかったのですが、このアプリは私がプログラミングで実現したいと思ったきっかけであり、思い入れがあります。
既に要件やデザイン、取得済みのデータがあるので技術のキャッチアップにも最適でした。

当時のサイトの動作画面

ですが、このアプリケーションには一点問題があります。
それはTwitterのAPIに依存しているため、改悪された現在では全く使い物にならないことです。
泣く泣く14000円を支払って取得を試みましたが15分で15ツイートしか取得することができないため、とても全サークルに対応することができません。
厳しくなったとはいえお金を払えば流石にいけるだろうと思っていたのですが甘かったです…。
というわけなのでせっかく制作したのにお蔵入りとなりそうです…。
ここで供養させてください…。

実は現在この制作を通じて身につけた技術を活かして、複数人でもっと大きな規模のアプリケーションを作っています。
というわけなのでこの経験は無駄にはしません！