https://create.t3.gg/
※ DOCSは日本語対応してた
https://create.t3.gg/ja/introduction

https://zenn.dev/hathle/articles/t3-stack-introduction

T3 Stackは、TypeScriptを中心にしたモダンなウェブ開発スタックのこと。
フルスタックアプリケーションを構築するための総合的なソリューションを提供し、JavaScriptエコシステム内の最高のツールとフレームワークを統合している。

• TypeScript
  • JavaScriptに型を追加することで、大規模なプロジェクトでも優れたツールを提供する。
• tRPC
  • TypeScriptで構築された型安全なAPIルータで、バックエンドとフロントエンド間の通信を簡素化する。
• Next.js
  • Reactフレームワークで、サーバーサイドレンダリングや静的サイト生成をサポートする。
• Prisma
  • 次世代のORM（オブジェクトリレーショナルマッピング）ツールで、データベースとアプリケーション間のインターフェースをシンプルにする。
• Tailwind CSS
  • ユーティリティファーストのCSSフレームワークで、迅速なスタイリングを可能にする。

T3 Stackはその柔軟性が特徴の一つ。
基本的なコンポーネントは上記のように定義されているが、プロジェクトのニーズに応じて他の技術を追加したり、置き換えたりすることが可能。
例えば、Prismaの代わりに別のORMを使用する、Tailwind CSSの代わりに別のCSSフレームワークを使うなどの変更を行っても、基本的なT3 Stackの精神は維持される。
ただし、あまりにも大幅な変更を加えると、「T3 Stack」とは呼ばれなくなる可能性がある。
重要なのは、TypeScriptを中心に据えたモダンなフルスタックアプローチを維持すること。

主に次の3つの「T」に関連している。

• TypeScript
  • T3 Stackの中心にある言語で、JavaScriptに型システムを追加することで、大規模なアプリケーション開発において優れた開発者体験とエラー防止を提供する。
• tRPC
  • 型安全なAPIルータで、バックエンドとフロントエンド間の通信を簡素化し、TypeScriptの型情報をフルに活用することができる。
• Tailwind CSS
  • ユーティリティファーストのCSSフレームワークで、直感的で効率的なスタイリングが可能。

この3つの「T」を組み合わせることで、開発者は一貫性のある型安全な開発環境を構築できるため、「T3 Stack」と名付けられた。
その他の技術スタック（Next.jsやPrismaなど）も含まれるが、基本的なコンセプトはこの3つの「T」に基づいている。

特徴

• 一貫性のある型安全性

  • TypeScriptを中心に据えることで、フロントエンドからバックエンドまで一貫した型安全性を保つことができる。これにより、コードの信頼性が向上し、バグの発生を減少させる。

• 型安全なAPI通信

  • tRPCを使用することで、フロントエンドとバックエンド間の通信が型安全になり、APIの定義と使用がシームレスに連携する。

• 効率的なスタイリング

  • Tailwind CSSを使用することで、ユーティリティクラスを活用した迅速かつ直感的なスタイリングが可能。

• サーバーサイドレンダリングと静的サイト生成

  • Next.jsを使用することで、SEOに優れたサーバーサイドレンダリングや高速な静的サイト生成が可能。

• データベースのスキーマ管理

  • Prismaを使用することで、データベーススキーマの定義、マイグレーション、およびデータの操作が簡単に行える。

メリット

• 開発者体験の向上
  • TypeScriptやtRPCなどのツールにより、型情報を活用した開発が可能になり、コード補完やエラーチェックが強化される。これにより、開発効率が向上する。
• 信頼性と保守性
  • 型安全性が高いため、コードの変更によるエラーが減少し、長期的な保守が容易になる。
• パフォーマンスの向上
  • Next.jsの機能により、サーバーサイドレンダリングや静的サイト生成が可能になり、ページの読み込み速度が向上する。
• 迅速なスタイリング
  • Tailwind CSSのユーティリティクラスにより、複雑なCSSを書くことなく、迅速にデザインを実装できる。
• 簡素化されたデータベース操作
  • Prismaを使用することで、データベースとのやり取りが簡素化され、スキーマの管理やマイグレーションが直感的に行える。

T3 Stackは、これらの特徴とメリットにより、モダンなフルスタックアプリケーションの開発を効率化し、開発者の生産性を向上させる。

• Theo氏が作成したWeb開発スタック。
• 「シンプルさ」「モジュール性」「フルスタックに渡っての型安全性」にフォーカス。
• 中核は「Next.js」「TypeScript」。「Tailwind CSS」もほぼ必ず含まれる。
• バックエンド領域も含めると、「tRPC」「Prisma」「NextAuth.js」も追加要素。
  👉 必要に応じて構成要素を入れ替えられるモジュール式のスタック。

• モジュール式のT3 Stackアプリケーションのセットアップ効率化のために作られたCLI。
• 各ユーザー毎に必要なライブラリを用いることを前提としており、全てを網羅したテンプレートではない。

問題を解決する

• 「何でもかんでも追加してしまう」という罠に容易に陥りがちですが、わたしたちは明示的にそれを避けます。create-t3-app に追加するものはすべて、その領域における固有の問題を解決している必要があります。したがって状態管理ライブラリ(Zustand、Redux 等)は含めませんが、NextAuth.js などは追加し、Prisma や tRPC などを統合します。

責任を負って血を流す

• 私たちは、最先端の技術が大好きです。正直なところ、新しい技術から生まれる開発速度と楽しさは本当に素晴しいものです。ただし、責任を持って血を流すことが重要です。リスクが低い領域では高リスク技術を採用しつつ、冒険的な新しいデータベース技術は採用しません(SQL は偉大なり！)。しかし、tRPC は単なる関数であり、問題があれば簡単に交換できるので、私たちは喜んでそれに賭けるのです。

型安全は必須

• Create T3 App の目標は、型安全なフルスタック Web アプリケーションを新規開発するための最も迅速な方法を提供することです。生産性を高め、バグの少ない製品を提供するのに役立つので、型安全性を真剣に考えています。Create T3 App の型安全性を損なうような妥協は他のプロジェクトで行うべき決定です。

なぜTypeScriptなのか？

• 型定義によって、エディタで自動補完や赤波線での警告表示の恩恵を得られる。
• TSの厳密さによって、バニラJSよりもストレスの少ない開発体験が得られる。

なぜNext.jsなのか？

• Reactの課題を解決する柔軟なアプローチを提供してくれる。
• ルーティング、API定義、画像レンダリングに至るまで、開発者が良い判断をできるように導いてくれる。

なぜtRPC/Prisma/Tailwind/NextAuth.jsなのか？

• できる限り新プリに保つべきだが、これまでの経験から必要な構成要素であることがわかった。

tRPC

• サーバーに対するシームレスで型安全なクライアント開発を、定型文を一切使わずに実現する。
  ※TypeScriptを利用する

Prisma

• SQLに対するPrisma ≒ JSに対するTS。
• DBからアプリケーションまでのE2Eの型安全性を保証する。
• DBの日常的な操作をより簡単にするためのツール群を提供している。

Tailwind CSS

• 優れたデフォルトの色、間隔、その他の基本的な構成要素や基礎となる部品を提供することで、見栄えの良いアプリケーションを簡単に作成できる。
• クラス名やファイルの編成など、「解決しようとしている問題には直接関係しないことがら」を気にせずにスタイリングできる。

NextAuth.js

• Next.jsアプリケーションに認証システムを導入したい時、手間をかけずに、複雑なセキュリティk条件下に導入できる。

※以下の構成要素を含む場合

• NextAuth.js
• Prisma
• Tailwind CSS
• tRPC