https://github.com/trpc/examples-next-app-dir
https://github.com/trpc/examples-next-app-dir
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/trpc/examples-next-app-dir
- Owner: trpc
- Created: 2023-05-12T12:48:22.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-31T19:39:45.000Z (about 1 year ago)
- Last Synced: 2025-03-31T20:34:24.539Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://examples-next-app-dir-trpc.vercel.app
- Size: 114 KB
- Stars: 202
- Watchers: 27
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 🚧🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 This is experimental and is subject to change 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧
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
### Current progress
- [x] Proof of concept of RSC support
- [x] Proof of concept of server actions
- [x] 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
### Contributing
Please join our [Discord](https://trpc.io/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
## Overview
> **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:
- [./src/app/ClientGreeting.tsx](./src/app/ClientGreeting.tsx)
- [./src/app/ServerGreeting.tsx](./src/app/ServerGreeting.tsx)
### Setup
#### 1. Create an API handler for tRPC
Example: [`/src/app/api/trpc/[trpc]/route.ts`](/src/app/api/trpc/[trpc]/route.ts)
#### 2. Create a local tRPC package with different entrypoints for `"use client"` & `"use server"`.
Files of note:
- [`./package.json`](./package.json)
- [`./src/trpc`](./src/trpc)