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 Server Actions

Anyone with experience using react query or type safe actions with nextjs? I'm looking for a bit of insight. It's been a while since I've used Next and I'm working on a project to understand it. I'm using the type safe actions lib and I'm curious about how something like a search feature would be implemented. I currently have server setup to run a server side action (not using tsa) by updating the route path with the search as a search param. The curiosity is, if I use TSA or even if I switched...

Advice for LARGE Product Embedding for AI?

Hey guys asking for advice. I want to make an AI chat bot. I want it to be able to chat about ANY product we have, but the store I am working with has 10k+ products and more get added / edited everyday. I am using openai, what would be the best way to feed the AI about these products? Would it be crazy expensive?...

Redirect and Middleware rewrites

Hi guys, I got a question that might be silly or not but is regarding the NextJS redirect and rewrites in the middleware in v 14.2.4. So I have a multi-tenant app, and in my middleware is where I rewrite my NextResponse (“NextResponse.rewrite()”). I'm using the tenant as a subdomain, so let's say that my local url looks like this: http://mytenant.localhost:3000/. So I have a case where I'm using redirect() from next-navigation to send the user to redirect('/the-redirect-url/foo/faa'). In the middleware when I want to grab that subdomain from the req.headers.get('host') I just got localhost as a host, while if I just reload a page from my subdomain, I do get mytenant.localhost as the host. So, what'm I doing wrong? Any hints or modifications? Did I miss something? Also, because I’m rewriting the response in my middleware, should I be using “x-forwarded-host” instead of “host”? If I do, it works fine, so it is safe?...

I am having difficulties with uploading Videos

So, it has been working over time but suddenly stopped. Whenever i upload a video, i can see it on my dashboad but the videoUrl is not sent to my db. I have also been receiving this message at the end of each try "Something went wrong. Please contact UploadThing and provide the following cause: RetryError"...

Auth js authentication in Next JS for laravel backend

Hey everyone, I'm exploring using Auth JS to handle authentication in my Next.js app and then checking authentication status on my Laravel backend, which is on a separate server. Any advice on setting this up? Also, I'd like to use server components in Next.js while ensuring users can authenticate to access protected routes in my Laravel API. Any tips for achieving this?

Is anyone else having issues with cloning skateshop

https://github.com/sadmann7/skateshop has been mentioned a couple times here. I was able to barely clone it after it had been stuck at 9% and now I'm getting a module cannot be found typescript error for all non nextjs-related modules.

Most Performant Way of Implementing Dialog/Sheet for Row Click in a large DataTable

What's the most efficient way to displaying a large data table and display a dialog upon clicking each row for detail in react? I'm using Sheet and DataTable component from Shadcn. I tried memoized the DataTable, and wrapping the DataTable with Sheet:...

does utapi.deleteFiles actually delete the files?

I deleted some files programmatically as indicated in the docs via the SDK. It removes it from my dashboard but I can still access the file through the original url. So is this a delayed process since it's a wrapper with S3? or will it actually never delete the image?...

UT wrong callback url

My uploadthing is not working on my production. Seems like the callback url is wrong. Can i specifiy that somewhere? I assume the reason is that the docker container starts node with HOSTNAME=0.0.0.0
Solution:
Found that UPLOADTHING_URL exists, that sets it.
No description

How to work with metadata for Linkedin Posts on Next 13+

Hey Guys, Do u guys know how to generateMetadata() on Next 13+ for Linkedin Posts? If yes, could u provide an example, please!...

Setting cookies on tRPC calls

Hey gang, I've been trying to figure out how to set cookies when making a tRPC response. With API routes its super easy - you just cookies(). But it sounds like trpc is more involved, and includes using ctx.headers. I also tried that, but I don't seem to be able to set any cookies in the browser.

NextJS broken when built for a production environment.

When I run npx next buld & npx next start the browser console of the web app displays all these errors, when running in dev mode it operate just fine and these errors are nowhere in site. It just kinda happened one day, it was workign fine till a client let me know issues were occuring. After checking I found this behavior and I (for now) am just having it run in dev mode to keep things working.
Solution:
Turns out cloud flare was caching some broken JS, purging my cloud flare cache resolved the issue immediately.
No description

Multiple Google OAuth Clients for a single Application?

Hello, I am currently developing an application that incorporates three distinct roles: admin, employee, and candidate. We are utilizing Google OAuth for login purposes. However, a colleague suggested employing two separate OAuth clients for the same application. One client would have a consent screen configured to permit only internal emails, while the other would be for general use. When I inquired about the rationale behind this approach, he mentioned scalability as the primary reason. I would appreciate your insights on this matter. Thank you for your attention to this matter....

How do I reset form fields through a server action / server component?

I have a form where there is a simple input field and a button. After clicking the submit button, the form submits and data is sent through a server action. How to I reset the form field while maintaining the component as a server component? I have see many solutions online where we would convert it into a client component and userefs/hooks etc to reset the form fields. Is there a way to do this through the server action / server component? ```...

Can i use uploadthing with dotnet core api ???

I was looking through the docs of upload thing for my university project and i am planning to use dotnet core for the api and turso for the db. but i didn't saw anything for non-js tech stack. can anybody clarify my confusion???
No description

Has anyone had success running a Node server on Railway.app for cheap?

First, I'd love if anyone could share a code example of a cheap to run http server they've run on railway. I attached a screenshot of my simple Elysia (library for bun) server and the pricing associated with running this for a few days. I was averaging around $1.50 per day. The memory and CPU usage were far greater than what I'd expect. FWIW I was seeing similar high usage with express before switching over. The high usage persists when I comment out the connections to redis and postgres (the postgres memory usage also seemed high for what I was doing - not making requests)....
No description

Custom font makes text “sink down” a bit

I tried searching online but I’m not familiar enough with css to know the vocabulary I need. I’m applying a custom font to my webpage, but for some reason it makes the text… sink? I’m not sure what causes this issue. Here’s a before and after with the default sans serif and the new font - pay attention to the paragraph text.
No description

Extending react-query with typescript

Guys I'm just wondering if I can do something like this? import { useQuery } from "@tanstack/react-query"; export function usePaginatedQuery (other params,...[USE QUERY PARAMS]) { const query = useQuery([USE QUERY PARAMS])...
Solution:
in general you can get very far with just the queryOptions API

How to keep a local DB in sync with a DB I don't own?

I'm making a RN/Expo app which is essentially a 3rd party UI for a service. Users add/edit/remove things from this remote database using the App, and the app renders that data in useful ways. At first, I was just requesting/sending data from/to the server as needed, but I would like to support an offline mode. I then made a SQLite database which is meant to stay in sync with the service when online, then when offline it will allow users to see and change data, which sync with the service later. My current way of managing this has been using React Query, where I'd request data from both the local DB and the service, combining them for display purposes and using mutations to synchronize them. However, every time I try to implement this it becomes really complex, and synchronizing via mutations in react leads to a lot of code dedicated to just making sure syncing from multiple places doesn't cause problems... I'm considering now only querying the local DB from my react code and performing the syncing behind the scenes. Logically this sounds very simple, since getting and modifying data becomes straightforward with RQ and requires no special cases for working offline. But I thought I'd ask for advice anyways since my last few attempts also seemed do-able but went poorly......

Do i use server components , actions over express JS for my App

i am building a chat app that will use socket io , mySQL database , next js , jwt for authentication as well , i was planning to use express js for the backend for my websocket server logic i was following the next js 14 tutorial they used server actions to submit form data for the new users and the rest of the App to their hosted postgre sql database is there any disadvantages for using server action and components for handling database logic over express js endpoints before i rea...