# Next.js Integration

> 

## tRPC + Next.js

Next.js makes it easy to build a client and server together in one codebase. tRPC makes it easy to share types between them, ensuring typesafety for your application's data fetching.

tRPC provides first-class support for both the **App Router** and the **Pages Router**. Choose the guide that matches your project:

## App Router

The recommended approach for new Next.js projects. Uses React Server Components, the [fetch adapter](https://trpc.io/docs/server/adapters/fetch.md), and [`@trpc/tanstack-react-query`](https://trpc.io/docs/client/tanstack-react-query.md).

Key features:

- **Server Components** - Prefetch data on the server and stream it to the client
- **Streaming** - Leverage Next.js streaming for optimal loading performance
- **Suspense** - Use `useSuspenseQuery` with Suspense boundaries for loading states

**[Get started with App Router →](https://trpc.io/docs/client/nextjs/app-router-setup.md)**

## Pages Router

Uses the [Next.js adapter](https://trpc.io/docs/server/adapters/nextjs.md) for the API, and the same client as the App Router: [`@trpc/tanstack-react-query`](https://trpc.io/docs/client/tanstack-react-query.md).

Key features:

- **Server-side rendering** - Prefetch a page's queries in `getServerSideProps` and render them into the first HTML. Read more about [SSR](https://trpc.io/docs/client/nextjs/pages-router/ssr.md).
- **Static site generation** - Prefetch queries in `getStaticProps` and generate static HTML files. Read more about [SSG](https://trpc.io/docs/client/nextjs/pages-router/ssg.md).

> [!WARNING] Deprecated
> `createTRPCNext`, `withTRPC` and `ssr: true` from `@trpc/next` are deprecated. They're built on the [classic React Query integration](https://trpc.io/docs/client/react.md) (`@trpc/react-query`), which only gets bug fixes and will be removed in the next major version of tRPC. See [Moving from `createTRPCNext`](https://trpc.io/docs/client/nextjs/pages-router/setup.md#moving-from-createtrpcnext). The experimental App Router helpers in `@trpc/next/app-dir` aren't affected.


**[Get started with Pages Router →](https://trpc.io/docs/client/nextjs/pages-router/setup.md)**

## Choosing between App Router and Pages Router

|                     | App Router                                   | Pages Router                                                    |
| ------------------- | -------------------------------------------- | --------------------------------------------------------------- |
| **Recommended for** | New projects                                 | Existing Pages Router projects                                  |
| **Data fetching**   | Server Components, `prefetchQuery`           | `prefetchQuery` in `getServerSideProps` or `getStaticProps`     |
| **Server adapter**  | [Fetch adapter](https://trpc.io/docs/server/adapters/fetch.md) | [Next.js adapter](https://trpc.io/docs/server/adapters/nextjs.md)                 |
| **Client package**  | `@trpc/tanstack-react-query`                 | `@trpc/tanstack-react-query`                                    |
| **Provider setup**  | `TRPCProvider` in the root layout            | `TRPCProvider` and `HydrationBoundary` in `_app`                |

> [!TIP]
> If you're starting a new project, we recommend the App Router. If you have an existing Pages Router project, tRPC works well with it and is fully supported.