tRPC
End-to-end typesafe APIs made easy
# `@trpc/next`
> Connect a tRPC router to Next.js.
## Documentation
Full documentation for `@trpc/next` can be found [here](https://trpc.io/docs/client/nextjs)
## Installation
```bash
# npm
npm install @trpc/next @trpc/react-query @tanstack/react-query
# Yarn
yarn add @trpc/next @trpc/react-query @tanstack/react-query
# pnpm
pnpm add @trpc/next @trpc/react-query @tanstack/react-query
# Bun
bun add @trpc/next @trpc/react-query @tanstack/react-query
```
## Basic Example
Setup tRPC in `utils/trpc.ts`.
```ts
import { createTRPCNext, httpBatchLink } from '@trpc/next';
// Import the router type from your server file
import type { AppRouter } from '../pages/api/[trpc].ts';
export const trpc = createTRPCNext({
config() {
return {
links: [
httpBatchLink({
url: 'http://localhost:3000/trpc',
}),
],
};
},
ssr: false,
});
```
Hook up tRPC inside `_app.tsx`.
```ts
import { trpc } from '~/utils/trpc';
const App = ({ Component, pageProps }) => {
return ;
};
export default trpc.withTRPC(App);
```
Now you can query your API in any component.
```ts
import { trpc } from '~/utils/trpc';
export function Hello() {
const { data, error, status } = trpc.greeting.useQuery({
name: 'tRPC',
});
if (error) {
return {error.message}
;
}
if (status !== 'success') {
return Loading...
;
}
return {data &&
{data.greeting}
}