この記事は デジタル創作サークル UniProject Advent Calendar 2025 24 日目の記事です。
前書き
皆さん、クリスマスの予定はありますか？
私はリアルの予定なんかないです。
でも一人は悲しいものです、そこでみんなでクリスマスを迎えられるサイトをつくりました。
本編
完成したサイトはこんな感じです。
使用した技術
- Next.js
- Reids
Redisは初めて使ってみました。
よさそうだったので初登場です。
どんな仕組みか
サーバー側
redisに接続して、60秒のTTLを保存しています。
一応30秒ごとにTLLは更新されるようにしていて、もしなかった場合は再生成されます。
更新するときには、現在の接続人数もついでに取得するようにはしていますが、別途取得するAPIも一応あります。
ページ離脱時にTLLは破棄するようにはしていますが、破棄されなかった場合は、自動削除されるので安心です。
くべでNext.jsとredisのPodを1つずつ動かしてます。
最悪何かあればスケーリングできる設計です。
データ自体はnfsに1GBの余裕を開けていますが、結構持て余してそうですよね。
クライアント側
クライアント側はNext.jsで動くようにしています。
SEOなどを頑張らなくても点が取れるのはいいことです
useEffectでAPIリクエストを送るようにしているのと、タイマーを動かしています。
タイマーに関してはnew Date()などのjsの機能で完結するようにしています。
それに加え、next-themesを入れて、ダークモードにも対応しています。
CSS等はtailwindに任せていて、切り替えボタンはshadcn/uiで作りました。
フォント等は特にこだわらず、数字のところだけInterを使うようにしました。
今回ミスったところ
自分の技術不足だとおもうんですけど、page.tsxにフォント系の設定をしてしまったのが心残りです。
普通にlayout.tsxにまとめたい人間なので…
あとタイマー系の処理があまりよくないかなと、時間があるときに修正したいですね。
まとめ
初めてこういう複数人いないと楽しめない系のやつを作ってみました。
是非、クリスマス直前に皆さんがあつまって使ってくれると嬉しいです。
地味にredisやnext-themesを初めて使ってみました。
意外と便利な機能が多くてこれからも使っていく予定です。