TRPCおよびnext.jsを使用したタイプセーフAPI

TRPCは、サーバー手順から自動的にタイプを推測して、休憩コンベンションまたは手動フェッチコールのないnext.jsでエンドツーエンドタイプセーフAPIを有効にします。 2。それをセットアップするには、typeScriptを使用してnext.jsアプリを初期化し、検証用のZODを含むTRPCと依存関係をインストールします。 3. src/server/trpc.tsでメインルーターを定義し、入力と出力を入力したsrc/server/routers/app.tsでAppRouterで手順を作成します。 4.要求状態を管理するために、SRC/Server/Context.TSでコンテキストを設定します。 5。FetchRequestHandlerを使用して、SRC/APP/API/TRPC/[TRPC] /Route.tsのルートハンドラーを介してAPIを公開します。 6.フロントエンドで、src/lib/trpc.tsでtrpcクライアントを作成し、queryclientとhttpbatchlinkを使用してSRC/APP/PROVIDERS.TSXでプロバイダーと一緒にアプリをラップします。 7.完全に入力されたデータと入力を備えたSRC/APP/page.tsxなどのコンポーネントのTRPCクエリまたは突然変異を使用し、自動コンプリートを可能にし、手動のタイピングまたはフェッチを排除します。このセットアップにより、バックエンドからフロントエンドへのシームレスなタイプのフローが保証され、バグが減少し、ゼロタイプの複製で開発者エクスペリエンスが向上します。

タイプセーフAPIは、フルスタック開発のゲームチェンジャーです。バグを減らし、開発者エクスペリエンスを改善し、多くの場合、手動のAPIドキュメントまたはランタイム検証の必要性を排除します。 TRPCおよびnext.jsを使用すると、特にフロントエンドとバックエンドの両方がタイプスクリプトである場合、最小限のボイラープレートでエンドツーエンドタイプセーフAPIを構築できます。

TRPCおよびnext.jsアプリルーター（V13）を使用してタイプセーフAPIをセットアップし、バックエンドからフロントエンドにシームレスにフローするようにする方法を次に示します。

✅1。TRPCとは何ですか？

TRPCでは、バックエンドAPIエンドポイントを書き込み、必要なくフロントエンドで消費できます。

• 休憩の規則
• Openapi/Swagger仕様
• マニュアルfetchコールまたはDTO
• ランタイムスキーマ検証（タイプを信頼する場合）

代わりに、サーバー上の手順（クエリ、突然変異）を定義し、TRPCは入力タイプとリターンタイプを自動的に推進し、フロントエンドでタイプに使用できるようにします。

「Autocompleteを使用したAPI」と考えてください。フロントエンドは、関数がどのような引数を使用し、何が返されるかを正確に知っています。

？ショ和2。NEXT.JSアプリでTRPCをセットアップします

ステップ1：プロジェクトを初期化する（新鮮な開始の場合）

 create-next-app@最新のmy-todo-app -Typescript
CD My-Todo-App

TRPCと依存関係をインストールします。

 npmインストール @trpc/server @trpc/client @trpc/race-query zod
NPMインストール @TRPC/REACT-QUERY V10のReact-Query @4＃

入力検証にZODを使用します（オプションですが推奨）。

ステップ2：アプリルーターを定義します

src/server/trpc.tsの下にメインルーター構造を作成します：

 // src/server/trpc.ts
'@trpc/server'から{inittrpc}をインポートします。
'./context'から{createContext}をimpomp。

const t = inittrpc.create（{context：createcontext}）;

const router = t.routerをエクスポートします。
const const publicprocedure = t.procedure;

次に、 src/server/routers/app.tsの下にシンプルなアプリルーターを作成します。

 // src/server/routers/app.ts
'../trpc'から{router、publicprocedure}をインポートします。
'zod'から{z}をインポートします。

const approuter = router（{{
  こんにちは：publicprocedure
    .input（z.object（{name：z.string（）}））
    .Query（（{input}）=> {
      return {Greeting： `hello $ {input.name}`};
    }）、
}）;

フロントエンドの推論のタイプをエクスポートします：

 export type approuter = typeof approuter;

ステップ3：TRPCコンテキストを作成します

// src/server/context.ts
{@trpc/server/adapters/next 'から{createTrpcContext}をインポートします。

export関数CreateContext（）{
  戻る {};
}

エクスポートタイプContext = returnType <Typeof createContext>;

ステップ4：TRPC APIハンドラーをセットアップします

src/app/api/trpc/[trpc]/route.tsを作成します：

 // src/app/api/trpc/[trpc]/route.ts
'@/server/routers/app'から{approuter}をインポートします。
'@trpc/server'から{createcallerfactory、createtrpccontext}をimportします。
'@trpc/server/adapters/fetch'から{fetchRequesthandler}をインポートします。

const handler =（req：request）=>
  FetchRequestHandler（{
    エンドポイント： '/api/trpc'、
    req、
    ルーター：AppRouter、
    CreateContext：（）=>（{}）、
  }）;

Export {Handler As Get、Handler As Post};

これにより/api/trpcの下でTRPC手順が公開されます。

ステップ5：フロントエンドにTRPCクライアントを設定します

クライアントインスタンスを作成し、Reactプロバイダーを作成します。

 // src/lib/trpc.ts
'@trpc/race-query'から{createtrpcreact}をインポートします。
'../server/routers/app'からtype {approuter}をインポートします。

const trpc = createTrpCreact <AppRouter>（）;

TRPCプロバイダーでアプリをsrc/app/providers.tsxでラップします：

 // src/app/providers.tsx
「クライアントの使用」;

'@tanstack/race-query'から{queryclient、queryclientprovider}をimport;
'@trpc/client'から{httpbatchlink}をインポートします。
'./lib/trpc'から{trpc}をインポートします。
「React」から{ueseState}をインポートします。

エクスポート関数プロバイダー（{子供}：{children：React.Reacnode}）{
  const [queryclient] = uesestate（（）=> new QueryClient（））;
  const [trpcclient] = uesestate（（）=>
    trpc.createclient（{
      リンク：[
        httpbatchlink（{
          url： '/api/trpc'、
        }）、
      ]、、
    }）
  ）;

  戻る （
    <trpc.provider client = {trpcclient} queryclient = {queryclient}>
      <queryClientProvider client = {queryClient}>
        {子供たち}
      </queryClientProvider>
    </trpc.provider>
  ）;
}

ルートレイアウトを更新します：

 // src/app/layout.tsx
'./Providers'から{プロバイダー}をインポートします。

デフォルト機能rootlayoutをエクスポートする（{
  子供たち、
}：{children：React.Reactnode}）{
  戻る （
    <html lang = "en">
      <body>
        <Providers> {Children} </Providers>
      </body>
    </html>
  ）;
}

ステップ6：コンポーネントでTRPCを使用します

次に、API Type-Safelyに電話してください。

 // src/app/page.tsx
「クライアントの使用」;

'../lib/trpc'から{trpc}をインポートします。
「React」から{ueseState}をインポートします。

デフォルト機能Home（）をエクスポートする{
  const [name、setname] = uesestate（ ''）;
  const {data、isloading} = trpc.hello.usequery（{name}、{enabled：!! name}）;

  戻る （
    <div>
      <h1> trpc next.jsの例</h1>
      <入力
        value = {name}
        onchange = {（e）=> setName（e.target.value）}
        PlaceHolder = "Enter name"
      />
      {アスロード？ <p>ロード... </p>：<p> {data？..greeting} </p>}
    </div>
  ）;
}

buranyマニュアルタイピングはありません。 fetchありません。 JSONの解析はありません。 dataオブジェクトは完全に入力され、入力検証はZODを介して行われます。

？ 3.なぜこれがうまく機能するのか

• エンドツーエンドタイプ：バックエンド手順からフロントエンドフックまで - ゼロタイプの複製。
• 自動完了：IDEは、利用可能なすべての手順とそのスキーマを知っています。
• 過剰フェッチング：GraphQLとは異なり、正確な関数を定義します。
• 軽量：別のバックエンドサービスまたはスキーマ言語は必要ありません。

？ボーナス：フォルダー構造のヒント

物事をスケーラブルに保つ：

 /src
  /サーバ
    /ルーター
      app.ts
      user.router.ts
      post.router.ts
    Context.ts
    TRPC.TS
  /lib
    TRPC.TS
  /アプリ
    API/TRPC/[TRPC] /Route.ts
    page.tsx

アプリが成長するにつれてルーターをマージします：

 // src/server/routers/app.ts
'./user.router'から{userrouter}をインポートします。

const approuter = router（{{
  こんにちは：publicProcedure ...、
  ユーザー：userrouter、
}）;

✅最終的な考え

next.jsでTRPCを使用すると、次のことがわかります。

• フルスタックタイプの安全性
• 自信を持って急速な発展
• クリーンで保守可能なコード
• @trpc/react-queryを介して組み込みのReactフック

FrontEndとBackEndが一緒に暮らすフルスタックのタイプスクリプトアプリに最適です。

TRPCに行くと、 fetch('/api/users')を再び書きたいとは思わないでしょう。

基本的に一度セットアップしてから、バックエンド全体のオートコンプリートをお楽しみください。

以上がTRPCおよびnext.jsを使用したタイプセーフAPIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。