Theo's Typesafe Cult

TTC

Theo's Typesafe Cult

Join the community to ask questions about Theo's Typesafe Cult and get answers from other members.

Join

Understanding sockets with t3, looking for tutorials

Has anyone produced any guides for implementing websockets with t3? I'm aware of the zapdos repo and socketi but looking for something more step by step to help me understand how it fits together. My app flow would be - User A hosts a room which generates a code/URL, names themself - User B joins the room with the code/URL (and the room is now full), names themself...

How to get started with next 13?

How to get started in T3 app with next 13?

bundle size and browser performance

I'm comparing framer motion and motion one for my react app regarding bundle size and Page Speed Insights performance metrics. I'm trying to use PSI but it seems very inconsistent with its scans favoring one over the other at times. Does anyone have suggestions for use PSI better or using other analyzers? Also suggestions for Network tab to help? Currently installing a bundle analyzer...

Fine Grained Authorisation

Can people indicate the best approach to fine grained authorisation within a T3 stack app. This means for each authenticated user, we have an Access Control List (ACL) which contains all the fine grain privileges a user has. Most examples are just trivial, e.g. two roles Admin and User. In real world business apps, we construct roles from many fine grained privileges. For each use case we need to control the UI elements and API calls which are allowed. This means grey-outs or removal of UI eleme...

t3 app with a need for a REST API reached by other locations

Hello, everyone! I currently have finished work on a t3 app and everything is setup as per the client needs. (It is a small dashboard app for managing a few business-side tasks). Everything is amazing so far and I've loved working with t3 in prod. However my client now has come with a new request: Some of the resources needs to be reached from outside locations (2 other websites) through a REST API to be used just for display. (Simple GET requests). ...

Auth Solution

Researching token vs session based auth has been a pain. In my "design" i have two services, an api and a websocket and theres a possibility i will have a third, i need auth on all of these. Session auth seems to be the most basic, it also seems like it would be a pain to deal with as, afaik, you cant share cookies between domains. and everything ive read says you shouldnt store sessions in local storage. im very unsure of token based auth, i can find a lot of articles on it, but not really any...

Firebase signIn issue in React Native Expo production build - Crashes after selecting Google account

I am facing a critical issue in my React Native app where the app crashes abruptly after selecting a Google account during the signin process, but only in the production build. In the development build (Expo), the app works fine without any crashes. The next time the app opens the checkedSignIn function works fine which means sign in was successful but the doc is not created in the firestore. Overview: -The issue occurs specifically in the production build of my React Native app. -The crash happens after selecting a Google account during the signin process....

Next 13 App Dir, performance benefits

Hello, are there really any performance benefits using server components and the app directory compared to regular SSG from Next 12? Is it worth migrating to the app dir?

Do you use Prisma data-proxy for your T3 app?

I found out the service only have two locations (Virginia and Frankfurt, if I’m not mistaken). And I think I don’t get any advantage using it because sometimes I keep getting my vercel function process time is beyond what I have right now (10ms). FYI I use supabase to host the db. Supabase also offer pool at port 6543 with pgbouncer enable. And I think this is going good for me for a while What do you guys recommend? I want to get wht’s the best practise to implement this...

Link won't navigate to app/not-found.tsx in app dir

Hi I made a sandbox example to demo this https://codesandbox.io/p/sandbox/elastic-julien-q8713m?file=%2FREADME.md If I delete the app/not-found.tsx then next links will work as expected (with the default 404 page), am I doing something wrong or is this a bug, ty....
Solution:
Never mind seems to just be an issue with local development i tried deploying the same project on vercel and it works fine xd

Passing Array of Strings to the backend

I am tryna to pass a string of ids to the backend so I can connect them, but the array is not being passed through. I have attached the pictures. In the frontend the data is being entered into the array but when I print it from the backend input, and empty array pops up.

NextJS with Server Components & React Native

If I want to make an app that has both a web version in next js as well as a mobile version in react native, will that be an issue if I wanna use server components for the web version? Since I wouldn’t need api endpoints to fetch data for my server components, but my mobile frontend would still need them. I could make api endpoints to get data in next and only use the for the mobile app but that feels inelegant. Is there a good solution to this?

Can somebody help recommend how to use 'npx prisma db push'.

Everytime it shows the following error inspite of my several attempts of adding prisma.schema in my package.json file. Thanks...

[TRPC or Prisma or React Native issue?] Do not know how to serialize a BigInt

I og started a thread on the TRPC discord but am also posting here to see if anyone else has a better solution for this issue. I am trying to figure out exactly where this issue originated from. OG link: https://discord.com/channels/867764511159091230/1110257286707937380/1110257286707937380 I am calling a trpc query in a component based on a currently selected item in a flatlist, and getting error:...

CI error when importing static image files

I noticed a strange issue with my CI today. In one of the files, I am importing a jpg to later use it in the Image component from Next. Normally in your editor, this is all fine, no type errors. In CI however, Typescript can't find the module/its type declarations. I found that the image declarations are imported in the next-env.d.ts file. Because it is not committed to VC and my CI simply runs tsc -noEmit when typechecking, there is no way for Typescript to find the type declarations. ...

How can I build interactive blog post

hello friends I'm planning to build an interactive blog where I'm completely free to build interactive components in JS and insert them efficiently into the html it's trivial to do if I'm using just html but I feel like inserting all the text into HTML is a bit unstable, so is there like a typical way people do this? Like, specific technologies to do this with as little friction as possible, while still having good flexibility with the interactivity I'm quite impressed by websites like https://distill.pub/, and frankly I want to build something similar....

tRPC - Express - Next.js boilerplate

Is there a tRPC boilerplate, that lives in an express.js context that allows you to use all express middlewares from npm, with an already set next.js server, with a folder structure like create-t3-app?

Automate trpc router definition using prisma-trpc-generator

I am trying to generate trpc router along with zod schema using prisma-trpc-generator. I am facing three problems 1. contextPath :- as it was mentioned in the trpc file in the server folder there is no need to modify the file, should I export the context by default? 2. How to provide trpcOptionsPath 3. Be default publicProcedure gets exposed by the generator. How to export both publicProcedure as well as protectedProcedure...

How to handle deployment only environment variables with @t3-oss/env-nextjs?

Hi there, hope this is in the right place for this question. I wanna start using @t3-oss/env-nextjs to handle my environment variables however I have a few differences between the set of variables used in production and development and was wondering the recomended way to deal with this. Ideally I would like this to be a union type so I can achieve type narrowing. For now I am using optional but I may change to setting defaults. In the event that it may help to know why / what is different this is the list:...

How to use installed middlewares in tRPC?

There are a lot of middlewares from npm that I am using like helmet, session and so on. What is the recommended way adding these middlewares in my tRPC app? can you show a simple example?...