Theo's Typesafe Cult

Theo's Typesafe Cult community. Join the community to ask questions about Theo's Typesafe Cult and get answers from other members.

Join Server

Community questions


Strange network activity in devtools

Hi I'm learning t3 stack with this project (
I noticed a strange behavior on the live Chirp project page (
A network request is being made everytime I click somewhere in the devtools then back on the page.
Steps to reproduce:
- Go to the live project page and open the devtools' network tab
- Refresh the page and wait 3s for it...

nextjs env t3 runtime error

I think i setup everything just as the docs said but i get the bellow error in the attached screenshot

error :
Unhandled Runtime Error
Error: Invalid environment variables

The env variables are correct
I used z.enum
The terminal doesn't show any errors

one thing: i changed the the file type of the next config from .js to .mjs as the one in the docs was because i got an error that said i...

getServerAuthSession at any place crashes my app. 5000+ errors per second!

Below, I have my server component for rendering a hamburger menu based on whether the user is authenticated.
const SidebarMobile = async () => {
    const session = await getServerAuthSession();



This might be a dumb question, but for those of you on planetscale, what tool do you use to view your database data. During development I just used prisma studio, and perhaps that's ok in prod too? Or is there another tool that people use to view the data in the db?

Weird error in trpc procedure

I am writing a simple create mutation but im getting some weird ts error. I tried restarting the ts server but no luck

export const postRouter = createTRPCRouter({
  create: protectedProcedure
        text: z.string().emoji().min(1),
    .mutation(async ({ ctx, input }) => {
      const authorId =;

      const post = await{
        data: {

405 Error with S3 Presigned URL's

I currently have a 'PDF viewer' on my website which is suppose to render a PDF from my s3 bucket and prevent the user from being able to download, print, etc the pdf.

Here's the code for the /exams/page.tsx file (the PDF viewer)
"use client";
import React, { useState, useEffect } from "react";

const PDFViewer = (presignedUrl: RequestInfo | URL) => {
  const [pdfUrl, setPdfUrl] = useState("");

  useEffect(() =>...

unless if want to share components / utils between packages , why we need a mono repo ? T3 cli app ?

The T3 Cli have www for the website and a cli , but they dont share any thing in common except the tsconfig. Why do we need a turbo repo for this. If they were two different packages , two git repo , then what change we would have seen ?

Need clerk webhook example

I have been trying to configure a webhook to be called as soon an organization has been created and the webhook should call a prisma query to do a DB entry but I couldnt find any example that would help me configure this.
I am using pages router.

GitHub Action Failing Type-Checks but Working Locally

I'm setting up an automatic github action that will run type checks on my nextjs app when pushed / pr'd to main. Problem is the type checks fail in github actions but pass locally.
# .github/workflows/status-checks.yml
name: Status-Checks


looking for some tutorials

coming from a rails background, im new to node & t3 in general, is there a tutorial i can follow to play around with the t3 template?

is it worth it to have meaningful errors returned from server side form validation?

like is it worth it at that point to return an error for every field that is invalid from the backend or should you just throw a bad request
assuming you already have full validation on client side
like if someone does somehow bypass client validation lets say by disabling javascript is it even worth it to have meaningful server errors for every field
i can see the argument for progressive enhancement but like if you want to have good ux on forms it feels like you almost always need jav...

Good setup for CRA + Serverless in a monorepo?

Hey folks, what’s a good setup for a serverless function and a CRA in a monorepo?

If I’m able to stick within vercel’s ecosystem, that’d be cool too.

How to redirect with new headers back to the same page?

User goes to page /foo, we check if this page is protected, if it is, we rewrite the page to something else using middleware, now this identical page has a password form.

The goal is to authenticate the password, and if its correct, redirect them back to the original page with headers pretty much allowing the user to skip the rewrite in the middleware and view the protected page.

Is this possible?

The Edge - what's the point

so as far as i know the edge move a server close as possible to your user right?
but then what's the point of the edge if the database is server located in one region which is depend one the user if the request gonna be fast or slower right?
i see the edge fit for applications where there's no database maybe? i'm new to all of these so if you can explain when should i use the edge or i'm missing something with all of that

cloudflare R2 in Versel?

Has anyone here used R2 in their NextJS app hosted on Versel? Trying to save money on bandwidth

What are the challenges to this

React.FC equivalent for RSC

Is there a "React.FC" equivalent for React Server Components?

How do I use the return type of a function with overloads that will be returned in the same function

I'm creating a library, but I have a problem when I use a function with overloads to return itself in some instances. It won't be able to determine the right type.

Media not rendering on first try, only after a refresh

Hey, first of all, this is my first complex Next.js project, so it is very probable that I am doing something stupid.

So the problem is that, on the homepage of my app I have a video (1) and an image (2) that render only after a refresh, they won't show the first time the website is accessed. Both of them are stored locally in the /public folder. I have attached a before and an after-refresh screenshot with the problem.

You can test this live here:

Route Guarding with nextjs

How do you implement route guarding with nextjs? Not too sure what would be the recommended way to do it. Basically what I is use a context provider then “useeffect“ my way into route guarding

Context: Firebase for backend and auth