3 replies

nextjs 14 TRPC, correctly setting up ws subscriptions

I am using nextJS 14 app router in combination with TRPC. I've been trying to implement TRPC's subscriptions feature to my nextJS app, however I have found that there seems to be very little documentation on the web on how to effectively do this.

One resource I did stumble across was this repo maintained by trpc's developers. In it, they have two seperate files

prodServer.ts

prodServer.ts

wssDevServer.ts

wssDevServer.ts

src/server/

src/server/

. Ideally there'd only be one file that serves to setup the ws server for both production and development, why is it that they use a separate file for each here? Another problem I have with this is that the wssDevServer file is ran in parallel with the main nextjs script

next dev

next dev

via

tsx wssDevServer.ts

tsx wssDevServer.ts

which means the servers are set up using two sets of configuration (next config under the hood for next dev and tsx for wssDevServer). This causes issues in my app as dependencies which are loaded correctly when the project is ran using

next dev

next dev

, begin encountering various ESM/commonJS mismatch errors when loaded by WSSDevServer, another headache caused by having two servers instead of one. I understand ProdServer.ts does run the ws server on the same server as the next app, however from my understanding this file must be built everytime it is ran, which is obviously not ideal for development.

I'd like to be sure I'm implementing TRPC's subscriptions to my nextJS app as effectively as possible, any knowledge is appreciated.

GitHub

GitHub - trpc/examples-next-prisma-websockets-starter: 🏓 tRPC Next....