🦁
tRPCの簡易設定 (AppRouter)
はじめに
tRPC を Next.js 14.0.4（AppRouter）で設定する手順を紹介します。
本記事では下記の動画で取り上げられている内容を参考に実装していきます。
以下が作業リポジトリです。
この記事の対象者
- Next.js 14.0.4 に tRPC を初めて導入する人
tRPCとは
tRPCは、TypeScript で書かれた、TypeScript のための RPC フレームワークです。
tRPC を利用することで、以下のようなメリットがあります。
- スキーマなど型定義をする必要なく、TypeScript で型安全な API を作成できる
- API の定義に変更があった場合、自動でクライアント側の型定義を更新してくれる
- シンプルに API を実装できる
Next.jsプロジェクトの新規作成
作業するプロジェクトを新規に作成していきます。
長いので、折り畳んでおきます。
新規プロジェクト作成と初期環境構築の手順詳細
プロジェクトを作成
$ pnpm create next-app@latest next-14.0.4-trpc-sample --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app
$ cd next-14.0.4-trpc-sample
Peer Dependenciesの警告を解消
Peer dependenciesの警告が出ている場合は、pnpm installを実行し、警告を解消します。
WARN Issues with peer dependencies found
.
├─┬ autoprefixer 10.0.1
│ └── ✕ unmet peer postcss@^8.1.0: found 8.0.0
├─┬ tailwindcss 3.3.0
│ ├── ✕ unmet peer postcss@^8.0.9: found 8.0.0
│ ├─┬ postcss-js 4.0.1
│ │ └── ✕ unmet peer postcss@^8.4.21: found 8.0.0
│ ├─┬ postcss-load-config 3.1.4
│ │ └── ✕ unmet peer postcss@>=8.0.9: found 8.0.0
│ └─┬ postcss-nested 6.0.0
│ └── ✕ unmet peer postcss@^8.2.14: found 8.0.0
└─┬ next 14.0.4
├── ✕ unmet peer react@^18.2.0: found 18.0.0
└── ✕ unmet peer react-dom@^18.2.0: found 18.0.0
$ pnpm i postcss@latest react@^18.2.0 react-dom@^18.2.0
これで警告が解消されました。
クリーンアップ
不要な設定を削除し、プロジェクトを初期化します。
styles
CSSなどを管理するstylesディレクトリを作成します。globals.cssを移動します。
$ mkdir src/styles
$ mv src/app/globals.css src/styles/globals.css
globals.cssの内容を以下のように上書きします。
src/styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
初期ページ
app/page.tsxを上書きします。
src/app/page.tsx
import { FC } from "react";
type HomeProps = {};
const Home: FC<HomeProps> = (props) => {
return (
<div className="">
<div className="text-lg font-bold">Home</div>
<div>
<span className="text-blue-500">Hello</span>
<span className="text-red-500">World</span>
</div>
</div>
);
};
export default Home;
レイアウト
app/layout.tsxを上書きします。
src/app/layout.tsx
import "@/styles/globals.css";
import { FC } from "react";
type RootLayoutProps = {
children: React.ReactNode;
};
export const metadata = {
title: "Sample",
description: "Generated by create next app",
};
const RootLayout: FC<RootLayoutProps> = (props) => {
return (
<html lang="ja">
<body className="">{props.children}</body>
</html>
);
};
export default RootLayout;
TailwindCSSの設定
TailwindCSSの設定を上書きします。
tailwind.config.ts
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
plugins: [],
}
export default config
TypeScriptの設定
baseUrlを追加します。
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
+ "baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
動作確認
ローカルで動作確認します。
$ pnpm dev
コミット
コミットして作業結果を保存しておきます。
$ pnpm build
$ git add .
$ git commit -m "新規にプロジェクトを作成し, 作業環境を構築"
tRPCのインストール
tRPC をインストールします。tanstack の React Query, zod もインストールします。
$ pnpm add @trpc/server @trpc/client @trpc/react-query @trpc/next @tanstack/react-query@^4.18.0 zod
tRPCのバックエンドの設定
tRPC を設定します。
$ mkdir -p src/server
$ touch src/server/trpc.ts
$ touch src/server/index.ts
src/server/trpc.ts にて tRPC インスタンスを作成します。
src/server/trpc.ts
import { initTRPC } from "@trpc/server";
const t = initTRPC.create();
export const router = t.router;
export const publicProcedure = t.procedure;
src/server/index.ts で、tRPC の API のエンドポイントを定義します。tRPC のエンドポイントは tRPC のインスタンスを経由して利用できます。
src/server/index.ts
import { z } from "zod";
import { publicProcedure, router } from "./trpc";
export const appRouter = router({
greeting1: publicProcedure.query((opts) => {
return { msg: "Hello World" };
}),
greeting2: publicProcedure
.input(z.object({ name: z.string() }))
.query((opts) => {
return { msg: `Hello ${opts.input.name ?? "World"}` };
}),
});
export type AppRouter = typeof appRouter;
続いて、tRPC のインスタンスにアクセスするための Route を作成します。
$ mkdir -p src/app/api/trpc/\[trpc\]
$ touch src/app/api/trpc/\[trpc\]/route.ts
src/app/api/trpc/\[trpc\]/route.ts
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter } from "@/server";
const handler = (req: Request) =>
fetchRequestHandler({
endpoint: "/api/trpc",
req,
router: appRouter,
createContext: () => ({}),
});
export { handler as GET, handler as POST };
next dev で実行されるポートを固定します。
package.json
{
"name": "next-14.0.4-trpc-sample",
"version": "0.1.0",
"private": true,
"scripts": {
+ "dev": "next dev -p 3003",
- "dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@tanstack/react-query": "^4.18.0",
"@trpc/client": "^10.44.1",
"@trpc/next": "^10.44.1",
"@trpc/react-query": "^10.44.1",
"@trpc/server": "^10.44.1",
"next": "14.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"zod": "^3.22.4"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.0.4",
"postcss": "^8.4.32",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
}
この次点で API が作成されているはずなので動作確認します。
$ pnpm dev
$ curl http://localhost:3003/api/trpc/greeting1
{"result":{"data":{"msg":"Hello World"}}}
tRPCのフロントエンドの設定
tRPC のフロントエンドを設定します。
Client Components
Client Components で tRPC を利用するため各種設定を実施します。
$ mkdir -p src/app/_trpc
$ touch src/app/_trpc/client-api.ts
$ touch src/app/_trpc/provider.tsx
src/app/_trpc/client-api.ts
import { createTRPCReact } from "@trpc/react-query";
import { type AppRouter } from "@/server";
export const clientApi = createTRPCReact<AppRouter>({});
src/app/_trpc/provider.tsx
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import React, { useState } from "react";
import { clientApi } from "./client-api";
export default function Provider({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(() => new QueryClient({}));
const [trpcClient] = useState(() =>
clientApi.createClient({
links: [
httpBatchLink({
url: "http://localhost:3003/api/trpc",
}),
],
})
);
return (
<clientApi.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</clientApi.Provider>
);
}
Provider を設定します。
/src/app/layout.tsx
import "@/styles/globals.css";
import { FC } from "react";
+import Provider from "./_trpc/provider";
type RootLayoutProps = {
children: React.ReactNode;
};
export const metadata = {
title: "Sample",
description: "Generated by create next app",
};
const RootLayout: FC<RootLayoutProps> = (props) => {
return (
<html lang="ja">
<body className="">
+ <Provider>{props.children}</Provider>
</body>
</html>
);
};
export default RootLayout;
動作確認するために Client Component を作成します。
$ mkdir -p src/components
$ touch src/components/greeting-1.tsx
src/components/greeting-1.tsx
"use client";
import { clientApi } from "@/app/_trpc/client-api";
import { FC } from "react";
const Greeting1: FC = () => {
const greeting1 = clientApi.greeting1.useQuery();
return (
<div className="bg-red-100 p-5 border-2 border-red-500">
<div className="text-red-500 font-bold">Client Component</div>
<div>{JSON.stringify(greeting1.data)}</div>
</div>
);
};
export default Greeting1;
src/app/page.tsx で上書きします。
src/app/page.tsx
import Greeting1 from "@/components/greeting-1";
import { FC } from "react";
const Home: FC = () => {
return (
<div className="">
<Greeting1 />
</div>
);
};
export default Home;
動作確認を行います。
$ pnpm dev
Server Components
Server Components で tRPC を利用するため各種設定を実施します。
$ touch src/app/_trpc/server-api.ts
src/app/_trpc/server-api.ts
import { httpBatchLink } from "@trpc/client";
import { appRouter } from "@/server";
export const serverApi = appRouter.createCaller({
links: [
httpBatchLink({
url: "http://localhost:3003/api/trpc",
}),
],
});
src/app/page.tsx で上書きします。
src/app/page.tsx
import { serverApi } from "./_trpc/server-api";
import Greeting1 from "@/components/greeting-1";
const Home = async () => {
const greeting2 = await serverApi.greeting2({ name: "Next" });
return (
<div className="">
<div className="bg-blue-100 p-5 border-2 border-blue-500">
<div className="text-blue-500 font-bold">Server Component</div>
<div>{JSON.stringify(greeting2)}</div>
</div>
<Greeting1 />
</div>
);
};
export default Home;
動作確認を行います。
$ pnpm dev
$ git add .
$ git commit -m "tRPCを設定"
まとめ
tRPC を Next.js 14.0.4（AppRouter）で設定する手順を紹介しました。
Discussion