2025-06-08
dubというURLを短縮し、トラッキングできるサービスがオープンソースで開発されており、Next.jsのApp routerを使って実装されているので、実装例を知りたいと思い、ソースコードを読んでみました。 https://github.com/dubinc/dub
https://dub.co/docs/local-development
時系列のクリックイベントのデータを保存するために使用している https://www.tinybird.co/
tinybirdのバージョンが最近上がってドキュメントの通りにやってもclassicだから動かない tinybirdのclassicのdocker https://www.tinybird.co/docs/changelog/2025-03-14-march-week-two?utm_source=chatgpt.com
実装方法が豊富なため、Providerパターンを使って共通の関数を使えるようにしているのだと思う。 useActionを使ってログインしている。
@upstash/ratelimitを使って、ログインのリクエストを制限している。
secondsの型がユニオン型の指定方法良いね
rest apiは用意してなくて、actionsでPrismaを使っている
サーバーでページを表示しても良いかのバリデーションを書けて、クライアントのページにはpage-client.tsxという名前を付けている
swrのmutateを使ってリフェッチしている。
キャッシュのキーもrouteのパスもべた書きしているのが気になる。
middlewareで認証していないユーザーがログインページにアクセスした場合に弾いている
next-safe-actionとは？エラーハンドリングや認可処理の共通化を型安全に行えるようになるライブラリ
ローディングとスケルトンどちらも用意している。 スケルトンは普通にスタイリングして作っていた。
next-axiomとは？サーバーレス時代のログ関数、パフォーマンス機能、web vitals、そしてプロダクトインサイト
一時データを保存するために使用されている。 キャッシュとしては特に使われてなさそう。
イベントトラッキングと分析のために使用されている。
describe.sequentialを使ってテストが直列で実行されるようにしている。
直列で実行されるようにすることで、postで作成したデータをgetで使用するようにしている。
IntegrationHarnessで初期データを用意してそう。
HttpClientを使ってAPIのテストをしている。
返り値もテストしているけど、面白いのがランダムな値はexpect.any(String)のようにしている。
next-axiomというライブラリを使ってログを計測していそう。
middlewareでログを登録している。
ok: booleanが返ってきている
エラーと、okがfalseの場合の違いって何なんだ?
okがfalseの場合は基本的なエラーハンドリングをして、
catchのエラーになるのはネットワークレベルのエラーや予期せぬ例外をキャッチするために使っている
fetch使うとokが返ってくるんだ
errors.tsで実装している。
一つエラークラスを定義して、そこにcodeを指定することでエラーを分類している。
タスクスケジューラとレート制限ができるライブラリ。 過負荷を防ぐために使用されている。
pnpmのworkspaceを使っている。
tsupを使って、各パッケージをビルドしている。
nodemailerを使っている。textは普通に引数で渡している。
CI/CDでテストは実行しているが、APIのインテグレーションテストのみでフロントはテスト書かれていなそう。
バックエンドはなく、サーバーレスで全部next.jsで実装されているのが面白い構成だなと感じた。 サーバーアクションの実装例を見ることができて参考になった。 ローディングが全てちゃんと実装されていたり、アニメーションがあったりとフロントエンドはとても作りこまれていると思った。 pnpmのworkspaceを使って、パッケージを分割しているのも良いなと思ったが、どうやって分けるかが結構経験がものをいうなと感じた。 ログや、クリックイベントをしっかりトラッキングしていた。 コンポーネントは基本的にProviderパターンを使って、共通の関数を使えるようにしているのが特徴的だなと思った。 今回初めてオープンソースのプロダクトを読んでみたのですが、知らないライブラリを知れたり、自分の実装の手数が増える感じがしてとても楽しかったです。