はじめに
今回は初めてNext.jsを使ったWebサービスを公開しました。Next.jsのモダンな機能をたくさん使った実装になっていますので、それらの実装や開発した経験について紹介します。
自己紹介
2007年生まれの17歳です。高校一年生の途中で高校を中退してから１年半ほどアルバイトでシステム開発をしながら個人開発をしています。
サービスの内容
新規登録していただけると大変うれしいですが、以下のログイン情報でログインしていただけます。
email: demo@example.com
password: password
👆操作デモ動画
Xやinstagramの機能、デザインを参考に投稿やいいね、コメントなど基本的な機能のみを実装しました。
なぜSNSを題材にしたのか
- いいねやフォローなど様々な細かいDB操作を含む機能が多く、クライアントからサーバーまでフルスタックに実装する経験を得られる
- 日常的によく利用するXやInstagramなどから設計のヒントやアイデアの着想を得やすい
- 実際に自分で使ったり友人に使ってもらいやすく、それらによって様々な改善すべき点を得られる
使用技術とそれらを採用した理由
Next.js 15
React 19
Prisma (ORM)
TailwindCSS
UIコンポーネントライブラリの使用を検討したが、自作でスタイルや動作を実装する経験を積みたいと思い採用した
Supabase (DB, Auth, Storage)
Firebaseを検討していたが、Supabaseのわかりやすいドキュメント、シンプルな認証システムを魅力に感じ採用した
Vercel (ホスティング)
tailwind-variants
sharp
画像処理
zod
フォームバリデーション
qrcode
「プロフィールをシェア」機能でのQRコード生成
linkify
投稿のテキストに含まれるURLをリンクに変換
eslint
prettier
👆GitHub
Next15 AppRouter での設計
- データの取得（投稿データの取得やプロフィール情報の取得）
- すべてServer Componentで行いClient ComponentにPropsとして渡す
- データの操作（投稿やいいね、フォローなどの操作）
- いいねやフォローなどUIの変化を含むインタラクティブなものはCliet Cmoponetからサーバーアクションを呼び出す形で実装し、なるべくReact19のuseActionStateを利用した
- モーダルをサーバーコンポーネントで実装する
- Next.jsのParallel Routes, Intercepting Routesを利用し、モーダルを開くとURLが変化し、Server Componentでデータの取得をした
開発を通して感じたこと
Server ComponentやServer Actionsの登場により、LaravelやRailsなどでMPAを作る場合と似たような開発の流れになってきていると思いました。
また、PrismaやsupabaseなどNodejsのライブラリなどを探したりしてみて、PHPなどとくらべて非常にコミュニティが活発でNode.js界隈の盛り上がりを感じました。
Next.jsではDB操作からclient componentまで全てに型情報がつき、
prisma.schemaでのテーブル定義の型情報を末端のclient componentまで渡せるのは非常に開発体験がよく、開発スピードを速める要因になると感じました。
おわりに
SNSサービスという特性上、通知や画像の参照などOS依存の操作がおおくなるため、やはりスマホアプリとしての開発もしたいと思いました。