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

How do you get query params in Next13, app router w/ route.ts file?

https://nextjs.org/docs/app/api-reference/file-conventions/route#parameters I am unsure of how you are meant to the get queryParams on the server site /api/route.ts file? I can find no mention of it? I am using the /app router and on the req: NextRequest parameter there is no req.query etc....

React table filter type error (.toLowerCase)

ts```<CommandItem key={option.label} onSelect={() => { if (isSelected) { selectedValues.delete(option.label);...

Prettier TailwindCSS not working with Next?

I just did a fresh create next app and i followed the instructions on the tailwindcss docs but its not formating my styles. I'm using next 13.4.9. Anyone know a fix?

White flashbang for millisecond before page load

So I'm noticing an issue where when swapping between pages on my site (/about, /home, etc.) it'll momentarily flash white before the styles are loaded. I'm using Astro and Tailwind, and even sticking a ```html <style> html { background-color: #040A0A;...

does activating SSR on tRPC mean requests no longer run on client?

let's say I have I am calculating a date in a tRPC procedure, without SSR enabled in tRPC config it will recalculate that date everytime I focus on the window or reload the page, with SSR enabled does the date update only when I deploy?

Adding Infinite Scroll to Theo's T3 Tutorial app

Hi All, I was able to replicate Theo's T3 Tutorial app and I am now adding new features to it. I have hit a big roadblock and would appreciate any help. I am trying to enable infinite scroll on the posts ( I call them stories). Theo's implementation fetched a hardcoded 100 posts, and I'm trying to get the posts to load batch by batch as the user scrolls. I'm getting this error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. ...

impossible to force (property) as (method)?

```ts { (method) open(a: boolean): string (property) close: (a: boolean) => string }...

how to make a custom styled UploadButton

```tsx export const UploadImage = () => { return ( <div className="flex flex-col items-center justify-between p-4"> <UploadButton...

Handle custom error class in error UI boundary

Hey guys, I am throwing a custom error
throw new GQLError(workout.message, workout.__typename);
throw new GQLError(workout.message, workout.__typename);
in a subpage. I then try to handle it using a error UI boundary. Everything works as expected but ```ts...

Zod enums vs Native enums

From what I understood from the documentation of Zod, enum should be use as followed : ```javascript const FishEnum = z.enum(["Salmon", "Tuna", "Trout"]); type FishEnum = z.infer<typeof FishEnum>; ...
Solution:
This is how I use enums with Zod : ```javascript // Single source of truth: const fishes = ["Salmon", "Tuna", "Trout"] as const...

how can modify cookies in route handler with server action

let say we have page route ```js export defualt function Page(){ const user=await getUser(); if(!user){...

when is virtualization neccessary

I have an array of 873 objects and im wondering if virtualization is needed, it also needs to be responsive and change the amount of rows/collumns based on the users screen size

CSS Naming advice

Hey guys, I'm kind of a noob and I was wondering if you could give me some feedback in my css class naming. I'm trying to use a BEM based approach where I only use classes as selectors and I wondered if it looks acceptable to you or if I will have problems writing css like this. Hope you can help me out happy

signout from server in next js 13

can anyone tell me how can i signout from server in next auth? signOut() is not working and below code is also not working(i am using this inside server action ```js cookies().set({...

Updated data not being fetched in production.

Hey guys so i just made a web app which uses prisma / planetscale and tanstack query. I have been trying to fetch data from the code below ```...

Some good old system design

Hello everyone, how you doing ? So I want to create a little app that consists of 2 main parts system-design-wise - and I'd like to know where you think I should host it (could be multiple platforms). Code Stack: NextJS, ...

Pages or App ?

I'm going to create a production project with nextjs, but confused, What is the best option pages/ or app/ ? Also i love the pages/ but i guess nextjs will remove it in one, two year ?? Or it stays forever??

Wait for ISR Revalidation (rather than showing stale data)

Hey guys! I had a quick question about using ISR in Next.js (app router) with Vercel. As outlined by the Next.js docs, these are the steps taken when using ISR: 1. When a request is made to the route that was statically rendered at build time, it will initially show the cached data. 2. Any requests to the route after the initial request and before 60 seconds are also cached and instantaneous. 3. After the 60-second window, the next request will still show the cached (stale) data....

What about Panda CSS?

Hey there! I can't find any talk about using Panda CSS over Tailwind on this Discord. I would like to have different opinions (especially from people with CSS skills) about it, I just started using it on a personal project with Next.js and I find its integration with TS awesome. Theo's recent video about Tailwind is not talking about this kind of solution. https://panda-css.com...

NextAuth sign in function not working properly

hey, i have nextauth set up with credentialsProvider on, i have the following onClick on a button: ``` onClick={async () => await signIn("credentials", { email: "some eamil",...