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

"no-cache" | revalidate: 0 breaks site in production

As title say, "no-cache" and "revalidate: 0" breaks site in production, on local it works fine. Also, setting it to something like "revalidate: 5" works. Repo: https://github.com/Apestein/nextflix/blob/bug-branch/src/app/page.tsx And as you can see the website has 404 error, it gives no error during build time https://nextflix-8xfr94may-apestein.vercel.app/ This deployment uses revalidate: 5 and as you can see it works: https://nextflix-blush.vercel.app/...

Problem with adding per-page layout in /pages router using typescript

``` // eslint-disable-next-line @typescript-eslint/ban-types export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & { getLayout?: (page: ReactElement) => ReactNode; };...

drizzle studio is not working

I am trying to open drizzle studio but it is giving me error can anyone tell my how to fix it? drizzle config:- ```js import type { Config } from "drizzle-kit"; ...

Has anyone used UploadThing to self-host file uploads in a CMS?

I wonder if anyone uses UploadThing as their file upload storage for an open-source headless CMS such as payload or strapi that allow you to self-host your data as well. Oftentimes, these providers either offer their own cloud deployment, or S3. I'm scared of AWS but possibly more of some CMS-deployment offering. I wonder if anyone has foreaged into this realm already. 🙂...

performing server-side authentication with t3-app stack before rendering the index page

My root pages/index.tsx page is functioning as expected: a useSession() call is made to see if there's an active session, and either a splash page or a simple "you're logged in" message is shown depending on whether or not the user is authenticated. ```TypeScript import { useSession } from 'next-auth/react' import Head from 'next/head' ...

charting lib that is performant

hey all -- looking for really simple library that i can use to turn crappy looking static bar charts into nice looking charts first use case is just to display existing data, later use case is to display data that changes weekly last time i used d3 but curious what you guys think...

Animated Slider

Hello everyone , I am trying to make a form in which users can enter one input at a time and they're able to do so with a button click that slides to the next input just like a carousel. I am using React and TailwindCSS. What do you guys recommend? Is there an animation library for my use case? Or should I implement it myself?...

Server-side authentication for external services

Hi all! I am looking at building a program that queries Google Earth Engine for forest data in a carbon project, and looking at how I could access their api using a generic account for all users. Their documentation: https://developers.google.com/earth-engine/guides/npm_install describe the process to initialize the client from the server. I have not done this before in a monorepo, so I wonder where the best place to do this within a vanilla T3 app structure? Since I am using a generic account, I am thinking I only want to run this once when the T3 app starts....

Send setter to `props.children`

So I think this is silly, but at the same time I don't find a way out of it, so I am here asking for help. I am trying to make a Modal that can accept any children and that children will receive the setOpen fn to open/close the modal independently. Let's show some code:...
Solution:
My preferred way though is to hoist the state of the modal outside of the JSX and store it in a hook. ```tsx const useModal = () => { const [open, setOpen] = useState(false); ...

App router question about Link

So, I have two pages. Page A has a <Link href="/b" />, Page B has a Math.random() called during the RSC run through. Page B also has a link back to page A. If I keep navigating between these pages, the Math.random is only ever called once. This is due to the soft navigation in next. How do I prevent or turn this off for a page? export const revalidate = 0 does nothing. I know I could manually do a router.replace then router.refresh, but that's very hacky obviously

Is there any way to signal a Server Component to refetch?

I'm learning about the Server Components and I came across a scenario that I'm not entirely sure how to fix. It's from this repository: https://github.com/vercel-labs/ai-chatbot, but the bottom line is that there's a Server Component that calls the server action getChats once the page loads, but I need to make this behavior happen again, like trigger a refetch once at least a message has been sent. My question is: is it possible to trigger a Server Component to refetch/revalidate? I saw the revalidating docs, but I couldn't find an answer to make an specific component to do it, only the whole page....
Solution:
So what I'm guessing is that the only way to do it is to revalidatePath after sending the message, is that correct?
So, to sum up, this is the correct way to fix this, right?...

Intranet Infrastructure

Hello Guys! Id like to ask if is it possible to deploy t3 pages router in intranet environment for local use only? I think itll be hassle for the server to just run vscode 24/7. if it is possible what is the workaround here?...

Unable to connect to prisma on T3 Stack project on new machine

Hello, I am transferring a project from my laptop to my desktop, and I copied my .env from one machine to another. On old old machine, I can run npm run dev locally and everything works great. However, on my desktop I get the following error after trying to load a page on the site: ``` prisma:error ...

Should i finish learning c# or stop halfway and learn javascript

currently learning c# and i’ve learned quiet a bit just finishe oop and i know all the basics and advanced topics i want to learn javascript for front end but i dint know if i should finish learning c# since im in the middle of a course or just go ahead and start learning js?

Does anyone have a good blog/video/resource to read up about CommonJS vs ESM vs CJS ?

Hi. I am new to bundling logic. Learning about these. I have a component library I am looking to publish internally. Looking at Uber's baseweb and Airbnb's visx, it seems from their package json that they publish pkg, cjs and esm versions. I don't quite fully understand what these are and what are the differences between these. Can anyone point me to good resources that explain what these are and the differences between them ?...

Get types of return value from trpc api call

For some reason in this new project when I get say the type of data I'm passing into useQuery is undefined it's actually expecting what would be the response of the function? Does anyone have any idea why, this works in other projects and I've used this consistently....
Solution:
RouterOutput["discord"]["getUserTeams"]

Static website slow after Vercel Deploy

I built a very static website for a client with Next.js everything works perfectly during development. When i deployed a preview version on vercel to show to my client, the render became very slow. Images and page content took forever to render, i then reduced the quality of each image but it still the same, what i can't understand is why content, plain text also took forever to render. Did i deploy to vercel wrongly?

next-auth

Im working on auth in this next app using next auth with google and credentials providers, and custom sign in and register page . I definitely don't knw if I'm doing it in the right safest way to prevent my data from attackers. I made only the
play
play
route redirect u to the login page when u're not logged in i'll do the same for the rest of the pages later except blogs, home, sign in routes Also the dashboard route will be protected route with user based auth
For now i wanna knw if my method is correct or not and what the things that i missed or did wrong....

importing data into [slug]

i have a '/craft' page where i display all the craft titles. at '/craft/{id}' i have to display a specific craft. how do people usually import the data for slug pages depending upon the id? also how do you import custom components for specific pages?...

Vercel Lambda 405/413 error (large payload)

I have a api route which can potentially return a large amount of data back depending on who calls it, this occasionally leads to a 413/405 error: [ERROR] [1688280447665] LAMBDA_RUNTIME Failed to post handler success response. Http response code: 413. My route currently has ``` export const config = {...