Skip to content

trpc/examples-next-app-dir

Repository files navigation

🚧🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 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

  • 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

Contributing

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

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:

Setup

1. Create an API handler for tRPC

Example: /src/app/api/trpc/[trpc]/route.ts

2. Create a local tRPC package with different entrypoints for "use client" & "use server".

Files of note: