Monitoring/Error tracking on Nextjs
Hello nerds! I'm working on a fullstack Nextjs App with tRPC .
And it is currently deployed to Vercel, right now I using Vercel logs to track error logs, but this only track the server side, i also want to track errors on clients.
Any recommendation? I thinking in adding Sentry, I used it times ago and had a good experience.
...
Run migration with Drizzle for Neon
Sorry if this is a n00b question, but I'm having some troubles running a migration of a Neon database locally with the env.js.
I'm trying to run this with the command
pnpm run db:migrate in the terminal
This is the script in package.json: "db:migrate": "tsx ./src/server/db/global/migrate.ts"...UploadThing > other file storage??
Obviously I’ll have the greatest speed for including the file in the project directly, but let’s say for developing a project for a client who may want to update their logo at any time, is there any benefit to using upload thing verses another file upload service’s url? Speed/security?…
nginx vs traefik vs caddy
I would like to know the opinions on which reverse proxy to use for self hosting
Improving Next.js Monolith
Hi Everyone! I have a question about architecting my app.
Currently I have a single (massive) Next.js 12 app that powers websites for multiple domains. This is because all of these domains have similar website and share many pages and components. Currently what it does is check domain client-side and render website accordingly (themes & content as per the domain). But as it is growing, its becoming slow. What would be a better way to build websites like these. What is the standard practice in this case?...
How do I protect myself from assholes?
What are your best resources and checklists on abuse prevention? Please share...
Bug!? Server side calls are not being cached
The below is causing 2 API requests, one of the key patterns in the app router is to be able to call API functions wherever and have the response be cached across the entire request.
```
async function Page(){
await serverApi.user.me()...
Handle Next <Image /> using Cloudflare?
Hi, if I upload directly the images in /public, and use <Image /> next, they'll be served via Vercel.
If I upload them to R2 Cloudflare, they will still be served via Vercel, because they'll be requested, transformed, and delivered optimised.
How could we cache these optimised images?
If we use Ignore Query String in Cloudflare Cache, it will deliver an unoptimized image i think, and if we use Standard, it won't be cached as far as I know.....
Why varchar instead of text in T3 postgres/Drizzle schema?
Hi! First question here so please be kind 🙏
I've started a new app with
create-t3-app, with Next Auth, PostgreSQL and Drizzle ORM.
The starting schema[1] for auth and a post example uses varchar all over the place.
...re-render issue loading fabric.js components in a react-slick carousel
I have a single fabric.js component, but pass it a photoId and IdCode which had 95 variations of how to place the photo.
I also have a react slick carousel with 8 slides. And 4 other carousels with 2 slides each. Each one is the same fabric.js component with a different id code. All being passed the same photoId. I am using ‘progressive’ as the last load function. So it loads and renders the first slide first. Then in the background loads the other 7 slides. (Or one slide for the 2 slide carousels.)
My issue is that I have other components on the page, and they re render each time a new fabric component loads in the background. So the other components flash 7 times. ...
resources to learn responsive css
I am currently building my portfolio site using tailwind and next and while i am managing to scrape through the css part , i am not able to make it responsive enough .
I searched for a lot of videos but it is simply not clicking for me the transition from normal css to tailwind.
any resources for that same would be awesome.
said portoflio site : https://sagnikweb.vercel.app...
Solution:
Have you looked at these? They should outline the helper breakpoint pseudo classes pretty well.
https://tailwindcss.com/docs/responsive-design
https://tailwindcss.com/docs/screens
Is the issue tailwind, or responsive design for you?...
need help with uploadThing SSR plugin
I want to understand how the uploadThing SSR plugin is implemented. What feature of nextjs is it implementing? I want to use it on my website but unable to figure out how its done.
Link to SSR Plugin: https://docs.uploadthing.com/getting-started/appdir#optional-uploadthing-ssr-plugin...
shadcn's form with uploadthing sdk
I am trying to upload an image to UploadThing through the SDK inside a server action. But I'm not sure how to fulfill the
uploadFiles parameters because I'm not receiving a FormData from the form.
My idea was to parse the image to base64 before sending to the server and then uploading it (that's what I usually do in my local projects) but I actually don't know how to pass base64 to be uploaded....Style library and component library for the new NextJS project
HI guys, I am doing research for a stack of new projects in a new company.
Commonly so far we have mostly used React with Antd and Styled Components. Now we have decided to switch to Next.js. I guess that Styled Components are out? I put up a quick test project and it seems that I have to add 'use client' to every component that uses styled-component, probably because SSR doesn't support runtime css-in-js. Do you know how SSR's compatibility is with Antd? Have you had any problems regarding this in your companies? Do you recommend what works well as a style library? I've seen some suggestions like Linaria, but it doesn't seem to be widely supported anymore. Can you tell us what stacks you use in your companies? Thanks!...
UploadThing folders for better organisation
Hey there!
I started using uploadthing (free plan for now) for a while now and found out that it became a little hard to manage the uploads. My use case is a restaurants SAAS where each restaurants uploads a variety of images.
Is there any way to create folders inside UploadThing to better organise the images?
...
No example of error handling in the app router
There's no example of how to get typesafe errors using the error.jsx file
T3 Stack Initial Git Commit Issue
I made a basic T3 stack application. I am trying to upload it to github but I keep getting this error: error: RPC failed; curl 16 HTTP/2 send again with decreased length
send-pack: unexpected disconnect while reading sideband packet
fatal: the remote end hung up unexpectedly
Please help...
Solution:
Figured it out using this stackoverflow page that I couldn't find for a while: https://stackoverflow.com/questions/66366582/github-unexpected-disconnect-while-reading-sideband-packet
NextJS wants me use 'use client' on its complied files?
I can't understand what is this even about let alone fix it. Help please
Solution:
Wrap the component in another component and put „use client” on top.
Seems like the creators of some package you are using didn’t use „use client” on top, it’s pretty common...
