t3 app router edge drizzle

T3アプリルーター（エッジ）

next.jsのベータアプリルーターを使用して、エッジランタイムで素晴らしいT3スタックを完全に使用する実験的な試み。

これは、ハッキングと学習の場所であることを意図しています。 next.jsの新しいアプリルーターを使用してアプリを構築する方法をまだ学んでおり、議論でコメントを歓迎しています。

エラーが発生した場合（そうします）、バグを修正して一緒に学ぶことができるように問題を作成してください。

これは生産を意図したものではありません。生産対応のフルスタックアプリケーションには、はるかに安定したCreate-T3-Appを使用します。

このプロジェクトは、Create-T3-Appと提携していません。

特徴

このプロジェクトは、多くの本当に賢い人々からの仕事とアイデアのコピーパスティングを表しています。作業プロトタイプでそれらをすべて一緒に見ることは便利だと思います。

• すべてのページとルートのエッジランタイム。
• Drizzle-ORMを使用したタイプセーフSQLおよびスキーマ管理。
  • Create-T3-AppはPrismaを使用しますが、PrismaはEdgeランタイムで実行できません。
• TRPCを使用したタイプセーフAPI。
  • アプリルーターのセットアップはここからコピーされています。
  • インストールされているTRPCバージョンは現在、 ./src/trpc/@trpc @trpcの実験アプリルーターTRPCクライアントにロックされています。 TRPCをアップグレードすると、水分補給が機能しなくなります。
• auth.jsを使用した所有認証
  • Create-T3-AppはNextAuthを使用しますが、これはEdgeランタイムをサポートしません。このプロジェクトでは、NextAuthの後継者であるAuth.jsを使用しています。 auth.jsはまだnext.jsのサポートを構築していないため、Solidstartの実装はコピーされ、わずかに変更されています。
• 追い風でのスタイリング。
  • CSSだけなので、アプリルーターではうまく機能します。
• Shadcn/uiからコンポーネントとレイアウトを反応します
  • また、CSSとRADIXでもあるため、アプリルーターでうまく機能します。

データフェッチ

サーバーコンポーネント + TRPC + Reactクエリが提供するいくつかのオプションがあります。これらのツールの柔軟性により、同じプロジェクトでさまざまなケースに異なる戦略を使用できます。

1. サーバーでデータを取得し、サーバーでレンダリングするか、クライアントコンポーネントに渡します。例。
2. サーバーでデータを取得し、それを使用してクライアントでReact-Queryのキャッシュを水和します。例：サーバー上にデータを取得し、脱水データを取得し、クライアント上のサーバーからキャッシュされたデータを使用します。
3. クライアントにデータを取得します。
4. データを取得しますが、サスペンス境界を使用して最初のバイトとサーバーコンポーネントをクライアントにブロックしないでください。 TODO：例。

はじめる

1. いくつかのコマンドを実行します。

   pnpm i
   cp .env.example .env

2. 入力.ENV。

3. スキーマの変更を新しいPlanetScaleデータベースに押します。あなたが気にする既存のデータベースでこのコマンドを使用しないでください。それは破壊的です（そしてベータ版）。

   pnpm db:push

4. next.js devサーバーを開始します。

   pnpm dev