This is a playground repo for an offical tRPC + Next.js App directory adapter.
Note You can already use tRPC with app directory, by:
- using
@trpc/client
directly in components (both RSC and non-RSC)- use
@trpc/next
for client components
- Proof of concept of RSC support
- Proof of concept of server actions
- Implement caching
- Implement cache invalidation on server calls
- Implement cache invalidation on client calls
- Get community feedback
- Make server calls invalidate client calls and vice verse
- Test it heavily
- Remove codecov ignore
- Delete all fixme/todo comments
- Finalize API
Please join our Discord if you want to discuss how we approach this.
If you want to change this repo, you go to https://github.com/trpc/trpc/tree/main/examples/.experimental/next-app-dir
Warning Don't use this in production unless you are okay with large refactoring.
Create a tRPC client that you can use the same way, no matter if you are in a server components
Examples:
Example: /src/app/api/trpc/[trpc]/route.ts
Files of note: