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

What is the correct way to generate SEO metadata in t3 app

I have been using <Head> tag in index.tsx file to add all my page meta tags, but it turns out it cannot show this metadata in search engines. So what is the correct way to add the meta tags in t3 app....

example repo testing with playwright

Hellp, I am looking for a repo testing using playwright and something to mock the api responses like msw. Do you guys know one ?

T3 App on linux/Chromebook

I am trying to create the T3 App on my chromebook but the command does not run in terminal… it says command not found, can anyone help please?

responsive with javascript

Hey guys, I have a question, I'm working on a e-commerce project with nextjs & tailwind, so I'm using javascript to responsive the layout insted of tailwind, is it a good idea ? I have created a hook called "useScreenSize" and i use it to make the layout responsive... Is this a good practice or a bad practice?...

deployment

anyone know how to config nodejs and ts to deploy on vercel i always fail on check because it return 500 internal error

Any free-tier solutions for heavy read-write personal projects?

Greetings readers, I need some wisdom from all of your experienced and enthusiastic devs on one web project I want to make as a hobby and for personal use. [Note: - I am not a web developer, also I don't know much about the backend but I'll learn that through this project. - I am not looking for advice related to how I should implement the project code-wise, as I want to figure out that fun part myself....

Looking for resources/articles/blogs/books on how to instrument a codebase with metrics

Not looking for how to use a particular library or do metrics in x language, but something more on the topic of how to add metrics in a "clean" way (and how to write code that lends itself well to this). I've just started working on a project at work where more than half the code is just emitting metrics and it's interspersed everywhere making everything unreadable. I'm convinced there's a better way to structure the code and probably magick away some stuff with annotations, but I'd like to do some reading on the subject so I can feel a bit more confident in what I'm trying to do. The code is just plain TypeScript that's being built to run on a Node.js Lambda, but I don't think that should matter here....

Root not-found.tsx with multiple root layouts

Is anyone aware of how to have a global not-found.tsx with multiple root layouts in Next's app directory? Multiple root layouts are supported as outlined here: https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts And a global not-found is outlined here: https://nextjs.org/docs/app/api-reference/file-conventions/not-found ...

what's adding the semicolons?

I can't seem to find the reason of all the semicolons being added everywhere in the freshly created t3-app. I've even added semi: false into the prettier.config.cjs file. Any clue of what's adding those semicolons, and how I can disable them? Thanks

Change label color on Dark theme

Is there a way to change the color of "JSON file (4MB)" to white, when my theme switches to white? I'm using Next.js, Tailwind, next-themes library...

trpc

I am new to trpc and I was wondering if I should use it in case I have a request to another backend and I don't use NextJS or prisma as my server side. would it be good idea to use the fetch() function in the trpc procedure or it is over engineering?...

multiple questions for a newer T3 / Webdev

Hey all, I'm a long time c++/python/etc dev who made the mistake to agree to assist a family member to help try to start a business for him. down the road they want a pretty robust site. I have some T3/nextauth/general questions if any of the experts out there could share some light as I know you all are experts in the field:...
Solution:
1. rule of thumb is server rendering/static generation is better for SEO, client rendering is better for an "app" type experience 2. yea next-auth is cool, one thing to look out for is it doesn't work well with react native (ie for mobile apps). planetscale is better value than rds for most use cases and comes with a lot of useful stuff that you have to pay extra / do yourself there. if you want the cheapest "scale to zero" db, look at railway. 3. that page is good. do extract your "dumb" ui components and keep them somewhere else. as a very general thing id say organize files by feature, not by file extension. anyway this is not such a big deal, you can always move stuff around later. 4. if you're clueless and want to do the least amount of work to get something ok looking, use a pre-styled component library like shadcn, chakra, mantine, etc. steal layouts from other apps. only use multiples of 4px for spacing unless you have a very good reason. if you want to put in a bit more work and actually learn about this stuff, buy the "refactoring ui" book...

Framework recomendations for jobs running with NodeJS

Hey everyone! I want to write a Node backend. It's not going to be a REST API but more like a couple of services that run as jobs on certain intervals and update database tables. I initially thought about using Express since it's the goto for Node but I'm now considering fastify....

Nextauth google login not creating registers

Hey, I am having an issue with the Google login/signup on nextauth, the GoogleProvider is not creating the register in my database somehow and I don't know what is happening, the user can login and I recieve the sessionData but there is no new register in the databse when using google credentials. Has anyone had this before? I am using a T3 app so I should have everything setup right?

What is the best way to make requests to a external api with Next?

I have a nodejs server and would like to make requests from a next application. I read about Route handlers, but I don't know if it's the best strategy and how to implement it...

Single source of truth for models using Zod and Prisma

I feel I'm redundantly defining my models using Zod and Prisma. I do a rough db-fitting definition in my Prisma schema file, and another more detailed one in my Zod schemas. I tried using prisma-zod-generator to have my Prisma schema file as a SSoT, but since I need more detailed validations like min/max for numeric values, and also more complex refinements, this solution is not good enough. ...

Zod, mocking fake data that works with refine?

Does anyone have some experience with zod mocking libaries? Docs list like six of them but my most important feature would be to get it working with refine(). I understand it's not possible to automate refine(), but I need it to get that working without huge hassle....

ZOD

I want the final response of the API to look something like this: ``` { "user": { "email": string,...

How to wait for useState to finish before setting useRef value?

I have two following form elements that do similar things. Get value using useRef and adding it to an array of elements using useState. First one works perfectly. It sets the value and then removes everything in input element and unfocuses it. However with the second one I have to choose between pushing an empty string or letting the input element retain its value. I'm guessing that is because useState is async and I just got lucky in the first one because it is a faster operation and it executed before input element was reset. What is the correct way to use these two hooks together with reseting input element afterwards. ```typescript <form onSubmit={(e) => { e.preventDefault();...
Solution:
Yeah you've got the right idea. newSubCatInput.value is captured by reference in the anonymous function (closure?, lambda? not sure what js calls em) I think the important part would be avoiding the capture of the DOM element. Using a reference to the string itself should work fine. ```Typescript...

How to fetch file

Is there a way with a react hook or something, to fetch an uploaded file with the name file..? I just cant find anything in the docs...?...