Jump to content

その他のオススメ

私たちは、create-t3-appに含まれるライブラリがすべての問題を解決するわけではないことを認識しています。私たちの提供物でプロジェクトを始めることをお勧めしますが、他パッケージの導入が必要となる時も来るでしょう。あなたのプロジェクトに必要なものを知っているのはあなただけです。ここでは、私たちが頻繁に推奨しているものをいくつか紹介します。

これらは、個々の Create T3 App の貢献者による推奨であり、Create T3 App チームまたは T3-OSS による「公式」推奨とみなされるものではありません。 特に有料サービスを利用する前にはご自身で調査してください。

状態管理

編注：tRPC の React Query フックでサーバー状態を管理することができるでしょう。クライアントの状態管理については、React のuseStateから始め、不足を感じた時になってからこれらの選択肢のいずれかを使用すれば良いでしょう。

Zustand

もう二度と Redux を使わないために

あなたが知らない「モダンでシンプルな Redux」。Poimandres↗はいつも信頼できます。この小さなライブラリで、ビデオ通話アプリからゲーム、サーバーまで、あらゆるものを作れます。

Jotai

もう二度と Context を使わないために

よりアトミックなアプローチでは、Jotai が勝るとも劣りません。Zustand と同じく、Poimandres↗から提供される Jotai は、グローバルな useState のような感覚でシングルトンを定義することができます。ステートマシンまでは必要としないステートフルな振舞いに最適なオプションです。

コンポーネントライブラリ

ほとんどのアプリケーションは、トグルボタン、ドロップダウンメニュー、モーダルなど、同じ一握りのコンポーネントを必要とします。これらのライブラリは、あなたの好みに合わせてカスタマイズできる、アクセスしやすい優れたコンポーネントを提供しています。

スタイル付けされていない(Unstyled)コンポーネントライブラリ

「ヘッドレスライブラリ」とも呼ばれ、スタイルにとらわれず、自分好みにカスタマイズできるアクセス性の高い素晴らしいコンポーネントが提供されています。ここでは、おすすめのものをいくつか紹介します。

  • Radix UI↗ は、バニラまたは Tailwind CSS でスタイルを設定できる、便利でアクセスしやすいプリミティブの強力なセットを提供します。

  • Tailwind CSS チームによって作られたHeadless UI↗も、Tailwind CSS とシームレスに統合された、スタイルのないアクセシビリティを考慮したコンポーネント群を提供しています。

  • React Aria↗は、アクセシビリティを考慮した UI プリミティブをあなたのデザインシステムに提供します。彼らの Date Picker コンポーネントはトップクラスです。

スタイル付けされた(Styled)コンポーネントライブラリ

アプリケーションを見た目良くしたいだけの場合

プロジェクトでは、UI がすぐに格好良く見えるようにしたい場合があります。管理者用ダッシュボードや、他の類似のプロジェクトでは、以下のコンポーネントライブラリのいずれかを使用すれば、目的を達成できます。

Class Variance Authority

UI ライブラリ構築用

色やサイズなどのバリエーションを持った UI ライブラリを宣言的に構築します。プロジェクトが大規模になり、複数のバリエーションがある 標準化した Tailwind CSS ベースの UI コンポーネントのセットが必要になったとき、CVA は素晴らしいツールになります。

アニメーション

アニメーションが必要なときのおすすめを紹介します。

AutoAnimate

1 行のコードでアニメーションを作成する場合

多くのアニメーションライブラリはありとあらゆるユースケースを満たそうとするため、結果的に不格好になっています。AutoAnimate は設定不要のツールであり、開発者の労力を増やすことなく UX を大幅に向上させることができます。

Framer Motion

宣言的なコードで複雑なアニメーションを実現する。

Framer Motion は、シンプルで宣言的なシンタックスを提供し、複雑なアニメーションからジェスチャーまで、より少ないコードで作成できるようにします。

デプロイメント、インフラ、データベース、CI

Vercel

アプリケーションのホスティング用

Vercel は、デプロイ作業のひどいつらみを巻き取ってくれ、GitHub 連携を設定すれば放っておいてもよしなにやってくれます。また、数十万人もいる利用者に何の問題もなくプロダクトを展開できました。AWS の力も得て、インターフェイスもはるかに優れています :)

PlanetScale

心配いらずのデータベースのために

PlanetScale は、これまで使った中で最も優れた「サーバーレスデータベースプラットフォーム」です。驚異的なスケーラビリティ、優れた開発者体験、そして素晴しい価格設定が魅力です。SQL（できれば Prisma）を使っているのであれば、これに勝るものはありません。

Railway

インフラのホスティングに最適

一言で言えば「モダンな Heroku」。本格的なサーバーを立ち上げる最も簡単な方法です。Vercel と PlanetScale だけでは十分でない場合、Railway がおそらくそれに対応します。GitHub のリポジトリを指定して実行してみてください。

Upstash

サーバーレス Redis 用

私たちは Prisma と PlanetScale が大好きですが、より高性能なソリューションが必要なプロジェクトもあります。Upstash を使うと、インフラとスケーリングを自分で管理することなく、サーバーレスプロジェクトで Redis のインメモリ性能を得ることができます。

Pusher

サーバーレス WebSockets 用

WebSocket がプロジェクトの主な焦点である場合、Fastify↗ (これはtRPC でも動作する!↗)のようなもっと伝統的なバックエンドを検討することをお勧めします。しかし、T3 アプリに WebSocket を素早く追加するには、Pusher は優れた選択です。

Soketi

Soketi は Pusher の代替となる、セルフホスティング可能でシンプルかつ高速なソフトウェアです。サーバーに接続するために使用できる Pusher SDK と完全に互換性があります。Soketi のサーバーレスもベータ版です。

アナリティクス(分析)

アプリケーションを開発していく上で、ユーザーデータはとても貴重です。ここでは、私たちがおすすめするアナリティクスプロバイダーをご紹介します。

Plausible

アナリティクスが必要ですか？Plausible は、それを得るための最も迅速な方法の 1 つです。非常にミニマムで、Next.js 用のシンプルなプラグイン↗もあります。

Umami

Umami は、Google アナリティクスの代替であり、オープンソースでセルフホスティング可能、シンプルで高速、プライバシーに重点を置いたソフトウェアです。PlanetScale をデータベースとして、Vercel や Railway などに実に簡単にデプロイすることができます。

その他

Next Bundle Analyzer

アプリケーションのビルド出力に何が含まれるかを判断するのが難しい場合があります。Next Bundle Analyzer は、生成される JavaScript バンドルを視覚化し分析する簡単な方法です。