TTC

Theo's Typesafe Cult

Join the Theo's Typesafe Cult server to ask questions!

Join

TTC

Theo's Typesafe Cult

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

Join

ziN

6/13/2023

How to load all these images at once?

Hi! How could I increase the user experience by avoid these images to be loaded when the filters change? https://lineage2guides.vercel.app/manor-calculator I would like to load and cache all the images before the user plays with filters....

Nicholas

6/13/2023

Component in App.tsx showing ts error:

'Component' cannot be used as a JSX component It doesnt seem to break anything, but is there somethign wrong with my setup?...

ratman3132

6/13/2023

How to set w and h for a flexbox item

As it says on the tin, I want to set a flexbox child to a % of the parents height and a % of the parents width. Every time I do something like this, the height or width does not change depending on if I am going row or column. example code is as follows: ```js import { type NextPage } from "next"; import Head from "next/head"; import Link from "next/link";...

shikishikichangchang

6/13/2023

error overlay

I wrapped my whole app (_app.tsx) in an ErrorBoundary with the message "Something went wrong". Then I throw an error in the api, and set useErrorBoundary of the custom hook to true. I do see that the UI has changed to the fall back UI ("Something went wrong"). I am also aware that the error modal doesn't appear in prod. My question is, is this expected behavior in Next.js? Even if the app is wrapped in an error boundary, the error modal still shows up?

test_1

6/13/2023

Can I create a website + native app that uses the same frontend code?

I hear a lot about react native and sharing codebase or something but I never understand the phrasing Is it possible to have a website + app that use the same frontend code or do I always need 2 separate, because last time I tried react-native I saw that it doesnt use CSS and HTML , and I can't worry about responsiveness on screens that arent mobile...

Froxx

6/13/2023

Atomic Design for React components using Tailwind classes

I was thinking about basing my app's components on atomic design since I like the approach: "a component defines how it can look, the implementation just says where it goes". This basically means: - CSS Props like "margin", "position" and "z-index" may not be defined on a component's root level element within that component itself, but instead in the implementation - Other props like "color" are defined within the component and can be made changeable by custom props like e.g. "variant"...

aditya

6/13/2023

Implementing share feature

I want to implement share feature which shares the link to a post to whatsapp. Currently I found this method but it only opens whatsapp web and there's no way to share it to contacts. Is there any other way to do this?

jonnyfapson

6/13/2023

How to structure complex interfaces for multiple stakeholder?

This question is a bit hard to explain, and only relevant for larger applications, but I'll give it a shot. Explaination: I'm building an app, where Clients [C] can communicate with Videographers [V] and request those videographers to create videos for them (i.e. create a video about xyz). I also have an admin dashboard, where Admins [A], should be able to access this feedback process....

Coded_58

6/13/2023

Using Tailwind UI

Hey guys, has anyone here used tailwind UI in there project before? I read it was built with Next.js so intergrating it with a Next.js project shouldn't be that difficult. I'm trying to purchase a ui library for my company and Tailwind UI has been the best i've seen so far... Or which other ui library is suited well with Next.js

test_1

6/13/2023

How to access trpcClient like in react-query: queryClient.fetchQuery ?

In react-query, the queryClient is exported and I can use it in certain situations like so const posts = await queryClient.fetchQuery( ... but with tRPC boilerplate code, I don't have access to the client and I can't emulate the behavior above. Btw I am not using Next.JS, i am using normal react frontend . Here is my boilerplate (feel free to give suggestions): ...

Thimo_o

6/13/2023

Nextauth add data to user that tries to sign up

I have my frontend where a user can signup to the website. For signing up they get a team number and a participant ID. When the user tries to login I want to add this data to my user. If the user tries to login without a valid team number/participantID then I want to block signing in in the nextauth callback. The issue I face is that the user needs to exist in my DB before I can review if he is provided the correct information and i can't access the team number or participantID in the signin callback. Do you know how I can make this work?...

Complexlity

6/13/2023

Rendering a different route Nextjs

I have a folder called Home in my pages directory, I want to render this Home folder without changing the url to /home when the user visits the / page. I've see the async redirects, but that changes the url...

pogadev

6/13/2023

Anyone used the `Etag` response header inside a Next.js Application?

I am using a getServerSideProps that renders some HTML on the server but everytime I make a request to my Next.js Application a new Etag is generated even tho' the contents are the same. I'm pretty sure it has something to do with getServerSideProps and I would like to keep it that way because I need some send some responses back in case of a business logic is met

mmurto

6/13/2023

Split tRPC to two endpoints on lambda and edge with Next

Is it possible/are there some examples of splitting the tRPC endpoint into two endpoints? My initial experiments a while back encountered some problems with trying to use nested withTRPCs. I'd like to have most of my routers on edge, but some don't work there, so need to leave them to lambdas.

cornflour

6/13/2023

Websocket with Next appdir/RSC?

With the new RSC paradigm, how would we write a React app with Websocket (say for example a discord clone)? Do we still do it similar to how it has always been done or is there a new (better) pattern for these types of apps? How would this change if I already have a functional backend vs just starting everything from scratch?

Solution:

You generate the html with the server component and let the client component do the rest

Eddy Hernández

6/13/2023

Next 13 + i18n + tRPC not working

When using next-intl app/api folder stops working. Used this guide https://next-intl-docs.vercel.app/docs/next-13 ...

Liam

6/12/2023

Unique Constraint in Drizzle

Coming from Prisma, I am trying to have a unique constraint on a column. Anyone know how to do this? It says it is yet to be implemented in the docs, but I honestly don't know how Drizzle would be a viable alternative to Prisma without being able to set things like unique columns in a table....

Christian Lind

6/12/2023

Edge function exceeded 1mb

I got this error in vercel, using next.js v13.2, "Build Failed The Edge Function "index" size is 1.09 MB and your plan size limit is 1 MB." ...

LuisCode3

6/12/2023

Next Auth unique Username with Social Login, best approach?

I am fairly new to Next Auth, I am struggling to find the best approach here. I am requiring users to register with a username, email, and password. With the social providers, when a user authorizes (lets say their github) for the first time, the user that is created seems to be storing null for the username. This presents an issue, in my schema I have this outlined for the user:...

IceAge2OnDVD

6/12/2023

Whats going on with these type errors? (Challenge, TSPlayground Included)

No mater how hard I try I can't seem to fix these Typescript errors. Tbh I'm not much of a typescript wizard and I've mostly been guessing at the types, any pointers in the right direction would be greatly appreciated. I seem to fix one error and three more pop up 🤦‍♂️ Playground (Test-cases & example included): https://tsplay.dev/Wzxn2N ...

Previous Next

Gaming

Programming

Theo's Typesafe Cult

Join the Theo's Typesafe Cult server to ask questions!

Theo's Typesafe Cult

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