- 2025年に向けた Full-Stack React Tech Stack
- SaaS製品または最小実用製品（MVP）を開発するうえで役立つ技術を紹介
- Next.js: Reactベースのフレームワークで、ルーティング、キャッシュなどさまざまな機能を標準で提供し、Server ComponentsやServer Functionsのような最新のReact機能を通じてバックエンドとの連携を支援
- Astro: プロダクトのランディングページを作成するための任意のツールで、高速なランディングページ制作と開発者体験の向上のために使われる
- Server Components: サーバー上で実行され、データベースへのアクセスなどを可能にするコンポーネントで、フルスタックReactアプリケーションの開発方法を革新
- Server Functions: Reactコンポーネントから関数呼び出しだけでサーバー側コードを実行できるようにする機能で、APIエンドポイントを自動生成
- Server Actions: Server Functionsのサブセットで、使いやすさを高めるためのライブラリも存在するが、直接実装することも可能
- Tailwind CSS: 迅速なプロダクト開発と長期的なCSS保守のために推奨されるツールで、慣れると従来のCSS手法には戻りにくい
- Shadcn UI: Tailwind CSSとスムーズに統合されるUIライブラリで、バージョンのないシステムを提供し、UI管理に新鮮なアプローチを提示
- Lucide React: Shadcn UIとあわせて使われるアイコンライブラリで、他の有力な代替が現れるまでは置き換える必要性は低い
- TypeScript: JavaScriptプロジェクトの業界標準で、開発者体験の向上、バグの削減、コード保守性の向上に寄与
- Zod: TypeScriptと相性の良いバリデーションライブラリで、主にサーバー側バリデーションに使用され、クライアント側フォームではネイティブHTMLバリデーションを活用して複雑さを減らす
- nuqs: Next.jsでURL状態（例: 検索、並び替え、ページネーション）を型安全に管理するためのツールで、他のフレームワークでは組み込み機能や別のライブラリを使うこともできる
- Zustand: クライアント側状態管理のための任意のツールで、URL状態、クライアント側データキャッシュ、サーバー主導のReactアプリケーションの進化により使用頻度は減少
- React Query: 無限スクロールなど複雑なクライアント側データフェッチに使われる任意のツールで、プロジェクトの複雑度が低い場合はServer Componentsだけでも十分
- Prisma (ORM): 安定したORMの選択肢で、最近のトレンドに応じてDrizzleへ置き換えることもできるが、現時点ではPrismaを優先
- Supabase (データベース): Postgresデータベースを提供するサービスで、柔軟性のためデータベースのみを利用し、Prismaで接続することで他のデータベースへの切り替えを容易にしている
- Lucia (認証): すでにメンテナンスされていないが、Oslo、Argon2、Arcticなどを活用した認証システム構築の学習資料として使われ、サードパーティーソリューションに依存しないカスタム認証システムを実装できる
- S3 (ファイルアップロード): AWS S3、署名付きURL、AWS IAMを活用して柔軟で低コストなファイル保存ソリューションを構築でき、多くのサードパーティーサービスも同じAPIを使うため必要に応じてプロバイダーを変更しやすい
- Inngest (キュー): バックエンドで複雑な処理をオーケストレーションするために使われるツールで、時間に厳密でないバックグラウンド処理に適しており、設定と保守が容易なキューシステムを提供
- React Email + Resend: 前者はReactコンポーネントでメールテンプレートを作成できるようにし、後者はメール送信のための優れたソリューションで、以前使っていたPostmarkからResendに切り替えて満足のいく結果を得ている
- Vercel (ホスティング): 長年使ってきたフルスタックアプリケーション向けホスティングソリューションで、セルフホスティングを望むならHetzner/DigitalOceanとCoolifyを推奨
- CloudFlare (ドメイン): さまざまなドメイン管理を経験したうえで、現在はCloudFlareの優れたUIとDNSレコードに追加情報を付けられる機能に満足して使用中
- Stripe (決済ゲートウェイ): 長年使ってきた決済ゲートウェイで、優れたドキュメントとAPIを提供する一方、機能とAPIの範囲が広がって複雑になることがある
- テストとツール: React Testing LibraryとCypress/Playwrightの組み合わせが良い選択で、ESLint（将来的にはBiome）とPrettierを推奨。UIドキュメントのために引き続きStorybookを使い、ターミナルでTypeScriptを実行するためにtsxを使用
1件のコメント
nuqs、知ることができました。ありがとうございます。