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

NextJS REST API storing authed User per request

Hello i am looking for a good way to store the current User per request on the backend with NextJS endpoints. I saw in terminals github the usage of node:asyncs_hooks wrapped by an Actor. I like that concept, but i think i dont need to have an AsyncLocalStorage.
Are the best practices to do that? could i just use a Map / an Object instead of the AsyncLocalStorage?...

SSE

Hey, I am looking for some assistance with Realtime updates in nextjs app router. I am uploading a file in my frontend and transcribe it. All is good and well, and I get a new item added to my file list when it is complete. But now, in the background, I am generating a summary for this file using ai, and I want to update the frontend when this is done. I have tried using Server Sent Events ( SSE ), but then my revalidatePath for other functionalities no longer worked....

"Expected an error object to be thrown." At From 0 to Production - The Modern React Tutorial

Hi, I was watching Theo's "From 0 to Production - The Modern React Tutorial (RSCs, Next.js, Shadui, Drizzle, TS and more)" and at 55:35, he was implementing UploadThing to the app and I had an error at if (!user.userId) throw new UploadThingError("Unauthorized"); and I couldn't fix it. I am using VSCode's ESLint Plugin and it gave me this error....
No description

why does this procedure get called twice, once with cookies and once without

export const userRouter = createTRPCRouter({
get: publicProcedure.query(async ({ ctx }) => {
const ssid = cookies().get("sessionId")?.value;
export const userRouter = createTRPCRouter({
get: publicProcedure.query(async ({ ctx }) => {
const ssid = cookies().get("sessionId")?.value;
...

Migrating from T3 to T3 Turborepo

I have an existing T3 web app (Next, Clerk, tRPC) and I'm developing a mobile version. How can I utilize the existing tRPC endpoints and Clerk auth? I know there's a monorepo sample that Theo went over in some videos, but I'm not starting from scratch....

[Next.js Image Component] Cache Images between pages

I'm using Tanstack Query to dynamically fetch data that includes an image URL, which I then load using the <Image /> component. On a different page, I fetch new data, but the image URL is often the same as the one on the previous page. The issue is that the same image gets loaded twice. Is there a way to reuse the image across both pages to avoid reloading it?

Api directory in App vs Server?

What is the difference between these? What kind of routes are defined in each?

how do I upload file directly

how do I upload file directly from node js to upload thing

T3 Env Client QQ

Hi folks, trying to use client side env variables but I keep getting type mismatch warning. Do clientside variable need to be passed into clientside components as props?

`drizzle-kit push` connection cleanup

When I run drizzle-kit push with postgres.js I get a connection that doesn't get cleaned up. How do I run a post-push cleanup script?

File Upload To AI Service

Iā€™m building a next JS app written in JavaScript (I know, I know, Iā€™m still learning). I want to know if Uploadthing will suit my use case. I need to allow users to upload audio files (greater than the 4.5mb limit of Vercel) which will then be passed to an AI service for transcription. Can I use upload thing in a purely JavaScript project?...

TypeError: Unknown file extension ".ts"

I've started a fresh T3-stack project and got this error when trying to run ts-node on any .ts file. err: ```bash TypeError: Unknown file extension ".ts" for test.ts at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:176:9)...
Solution:
AFAIK, it's ESM-related. I've just switched to tsx to avoid dealing with this

Uploadthing Unauthorized Error

UploadThing stopped working on my website. Initially got 500 Internal Server Error (couldn't reach https://uploadthing.com/api/prepareUpload). Generated new API keys, still same error. Deleted project, created new one, now getting 401 Unauthorized. Added new API keys to .env, followed docs, still not working. Same behavior in both production and localhost. Core issues: 1. Can't reach UploadThing API 2. Unauthorized errors despite correct setup...
No description

Should the server respond with the error or a generic "try again" message?

If a user makes an API request to the backend and the request fails because the database had an issue, should the server reply with the error that was thrown or should the server reply with a generic "Something went wrong" message? I'm leaning towards the generic error messages because showing the error that was thrown could allow an attacker to infer what database your using, and usually, you want to hide as much information about your backend from an attacker. But showing the actual error message would allow users to report bugs and show the developers the actual error message. ...

indecipherable build error

when building my nextjs app i get the error ``` Creating an optimized production build ... Failed to compile. ./node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/middleware-sdk-s3/dist-es/s3-express/functions/s3ExpressHttpSigningMiddleware.js + 38 modules Cannot get final name for export 'NO_RETRY_INCREMENT' of ./node_modules/.pnpm/@[email protected]/node_modules/@smithy/util-retry/dist-es/index.js...

Best way to do form?

What is the best packages for doing forms cleanly and easily with clientside validation? nextjs

NextJS routing

Anyone using NextJS ? I have a homepage that displays a grid. When I click on a cell, I want a popup to appear at the center of my screen. I also want my URL to change and add query parameters with the id of the cell, so that when users share that URL, the new user will have the popup displayed automatically without clicking. I know that NextJS has its own system of routing based on pages organized in folders. But in my case, it's more like a traditional SPA. Does NextJS have any native routing system to handle that case too ? Or I should npm install React router ?...

Update locale or query param doesn't trigger the loading.tsx file with useSuspenseQuery

So i've these two suspense query which are also prefetched in the page.tsx, but when changing the currency or locale, the loading state is not triggered but rather its updated in place. Any way to trigger the loading.tsx file? PS: Used <HydrateClient as well...
No description

I am getting error in eslint. I tried searching for solutions but couldn't find any. Can anyone help

80.57 Linting and checking validity of types ... 115.9 Failed to compile. 115.9 115.9 .eslintrc.cjs:8:13 115.9 Type error: Type 'string' has no properties in common with type 'Plugin'....