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

Sentry or Axiom? or both?

Whats sentry good at? Where should I use axiom instead? Or, can I use both, and if yes, how? My main goal is to set up alerts when requests fail in my pages/api endpoint, and if any frontend page breaks; how can I achieve this in the best way?...

I'm struggling with a large HTML file issue in my Next.js project.

The HTML byte size is huge, impacting performance. 🐢 🔍 Any tips on optimizing or reducing the HTML size?...
No description

Enabling small edits to webpage by non-technical clients, similar to WordPress

Bit of a nebulous question, but are there any tools that exist/yall recommend to allow non-technical people to edit small potions of a website, such as text? Essentially I'm wondering if I can get the dev experience from something like Next.js, while having the benefits of easy editing that something like wordpress gives.

Generating pdfs - what are you using?

What is everybody using for generating pdfs client side? i have this button at the top right people can click and download a pdf, should I just generate a pdf based on a screenshot? is there something better? thank you
No description

Guidance on Client Refresh after Server Action

Hey all, just looking for some guidance or maybe a push in the right direction on how to handle the client side after a revalidatetag/revalidatepath options in a server component. I have the video below that's drawer component getting a promise passed to it then using React.use on the client. Put some of the code below to follow all the way through but wanted to see if there's any thoughts. I'm initially thinking that it's not possible and have to use something client side like SWR but wanted to at least ask and see if anyone has something simple I'm just missing... page.tsx...

getBoxQuads-API - Transform a 3d point into 2D

Hello, maybe here someone can help me. I'm currently workin on a polyfill for the getBoxQuads API (see https://github.com/jogibear9988/getBoxQuadsPolyfill). My problem now is, it's working for 2D transforms, but not for 3d. Anyone here, who knows how a browser transforms 3d-points to the 2d view? On my sample page you see some wrongly calculated overlays: https://jogibear9988.github.io/getBoxQuadsPolyfill/ In the screenshots you see, chrome with my polyfill and the wrong overlays, firefox with a native working implementation. ...
No description

NextAuth session injection

Hello, I am pretty new to T3 stack and Next.js (App Router). I am working on an application, it should support 2 types of authentications. The first one is OAuth with NextAuth, the second is a sophisticated third-party script ID provider, let's call it ScriptAuth. The app requires user to be logged in, so all the pages are unaccessible, until user is logged it. While OAuth is simple, ScriptAuth works like that:...

Approaches to build a public readonly application

I have to build a new feature for my application: readonly public access. So if user A has watched 2 movies, they can share a link with someone else and they will be able to see what 2 movies A has watched. They wont be able to perform authenticated actions ofc (leaving reviews etc). How would I go about building something like this?...

eslint-plugin errors at build

i keep getting blocked on build for the nullcoalescence and unsafe to use any type errors . what can be advised ( its the @typescript/eslint-plugin)

Cost Efficient XL Generation for Large Products

Hey guys, title could have been better, but I am basically trying to setup an XML product feed for my store, which has 20k+ products including variants, and it constantly grows and shrinks throughout each day. I want the feed to rerun every 15 minutes, and I want to host this on vercel. I am worried about serverles costs since this is a function, below is my code with my approach I am doing caching, is this the most efficient way to handle this to reduce costs in Vercel? Is serverless (vercel) hosting bad for this use case? ```js // app/api/product-feed/route.ts ...

remotion media not seekable

Error during rendering: SymbolicateableError: The media https://listnraudioazure.blob.core.windows.net/text-to-video-prod/out/cover0c4163fcd-6e5d-4f06-b642-a4981cbc18b5-cropped.mp4 cannot be seeked. This could be one of two reasons: 1) The media resource was replaced while the video is playing but it was not loaded yet. 2) The media does not support seeking. Please see https://remotion.dev/docs/non-seekable-media for assistance. at warnAboutNonSeekableMedia (http://localhost:3001/bundle.js:8432:19) at HTMLVideoElement.seekedHandler (http://localhost:3001/bundle.js:8118:78) { ```stackFrame: [ {...

Pocketbase vs Supabase

So I have been looking into the easiest ways to make realtime applications recently and found that Supabase actually has a competitor by the name of Pocketbase. It seems to have most of the features that Supabase has and that most people would need. So I asked, which is better? After doing some research I found that Pocketbase is FULL open source in that you don't have a cloud based option where you can pay them to host it. This really appealed to my since Supabase can be somewhat pricey as you start working with bigger projects. Aswell it is way easier to self host since it comes as a binary, instead of the crazy Supabase docker setup. ...

Caching does not work with trpc in Next, what would you do?

Hi, I someone in trpc discord said: Currently documented tRPC cacheing methods (https://trpc.io/docs/server/caching) won't work as they rely on setting headers which NextJs now overrides (https://nextjs.org/docs/app/api-reference/next-config-js/headers#cache-control) And this is a big problem, what's a good alternative if I really need to cache my trpc calls?...

trpc server actions: experimental_nextAppDirCaller

So, I saw this in one of the recent videos that you t3 rockstars are doing gods work and adding server actions to trpc: https://trpc.io/blog/trpc-actions So, I am trying to implement this, but am constantly running into issues. Would be LOVELY to get a video from Theo explaining the best way to use t3-stack with server actions and shadcn forms. Like the happy path. Maybe its just not finished baking, so i m premature in my question here. But if anybody got trpc working with server actions let me...

Imports and exports not working turborepo

Using create-t3-turbo I have declared Projects in the db schema: ```ts // schema.ts export const Projects = pgTable("projects", {...

Next.js Slow Page Load in Dev upto 2 mins

```jsx /** @type {import('next').NextConfig} */ const nextConfig = { // reactStrictMode: true,...

Serverless function runs right after edge middleware is invoked, overriding built-time data

Hi all, I'm running a content focused website for my company using sanity for cms (with groqd for type-safe query building) and next-intl for i18n. Since going live I saw that the sanity api request bill is racking up even though I've set the request to sanity to be cached. Checking out the logs on vercel's dashboard. I noticed that it runs the serverless function again right after everytime the middleware cached is invoked and call the data from sanity again. This is different from what how it is in the POC project I mocked up with similar packages where only the middleware is called and there's no additional request to sanity Have anyone ran into this sort of issue? I would really appreciate the help. Thanks in advance...
No description

Noob can't get getStaticProps() to work – props in my Page are always undefined

Not a noob to programming in the slightest, but extremely noob to React/ NextJS. I wanted to try building my next site on this stack and while I'm enjoying it so far, I immediately hit the snag from the title. All I'm trying to do is get some props and pass it to my Page. I feel like I'm following the examples to a T, but the props are always undefined, in both dev and after a build. If anyone can tell me how I'm being a dumbass here, I'd appreciate it massively ❤️ Slightly trimmed gist of my gallery.tsx: https://gist.github.com/SenshiSentou/9173319ec8da82af805a83b470019e5e...
Solution:
Giving the props object a key and matching this name on the Gallery function's param solved it

Whats the point of this ternary operator in the nextjs homepage of Create T3 App?

I thought i knew my nextjs, but there is a
{hello ? hello.greeting : "Loading tRPC query..."}
{hello ? hello.greeting : "Loading tRPC query..."}
while hello is
export default async function Home() {
const hello = await api.post.hello({ text: "from tRPC" });
export default async function Home() {
const hello = await api.post.hello({ text: "from tRPC" });
...