IssueRaiser

feat: Support RSC & App Layouts

## Describe the feature you'd like to request We should make official support for Next 13 app layouts & RSC. ## Describe the solution you'd like to see Being able to transparently use tRPC identically in RSC-components and in `"use client"`-components. This is very open-ended and hard to answer without tonnes of exploration. We've done some in [https://github.com/trpc/next-13](https://github.com/trpc/next-13) and experiments of new Next.js adapters in [https://github.com/trpc/examples-next-app-dir](https://github.com/trpc/examples-next-app-dir) ## Rough outline / sketches Leverage "forked" versions of the tRPC client outlined by @sebmarkbage in [this tweet](https://twitter.com/sebmarkbage/status/1586107886765211649). ### Folder structure ``` . ├── pages │   └── api │   └── [trpc].ts └── trpc ├── index.ts # entrypoint for TS to be happy. Actually not used, `package.json` will magically route to `/entrypoints` ├── package.json ├── context.ts ├── entrypoints │   ├── client.ts # <-- this is what gets magically imported when importing `~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~/trpc` on the client │   └── rsc.ts # <-- gets imported when importing `~~~~~~~~~~~~~~~~~~~~~~~~~~

Posted by KATT on Nov 27, 2022, 4:10 PM

Tags

Related issues

Raise real-world problems, find people facing the same issue, and discuss solutions.2,500 issues0 comments

ux (SaaS)

feat: Support RSC & App Layouts

KATTNov 27, 2022, 4:10 PM

## Describe the feature you'd like to request We should make official support for Next 13 app layouts & RSC. ## Describe the solution you'd like to see Being able to transparently use tRPC identically in RSC-components and in `"use client"`-components. This is very open-ended and hard to answer without tonnes of exploration. We've done some in [https://github.com/trpc/next-13](https://github.com/trpc/next-13) and experiments of new Next.js adapters in [https://github.com/trpc/examples-next-app-dir](https://github.com/trpc/examples-next-app-dir) ## Rough outline / sketches Leverage "forked" versions of the tRPC client outlined by @sebmarkbage in [this tweet](https://twitter.com/sebmarkbage/status/1586107886765211649). ### Folder structure ``` . ├── pages │   └── api │   └── [trpc].ts └── trpc ├── index.ts # entrypoint for TS to be happy. Actually not used, `package.json` will magically route to `/entrypoints` ├── package.json ├── context.ts ├── entrypoints │   ├── client.ts # <-- this is what gets magically imported when importing `~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~/trpc` on the client │   └── rsc.ts # <-- gets imported when importing `~~~~~~~~~~~~~~~~~~~~~~~~~~

Comments (0)

No comments yet. Start the discussion.

Comment on this issue