Build an Invoice App with Next.js 15

  Рет қаралды 63,693

Colby Fayock

Colby Fayock

Күн бұрын

Пікірлер: 231
@punitmistry2406
@punitmistry2406 2 ай бұрын
Hey Everyone if you are using the next 15 the latest one and if you are getting the error while installing the shadcn so just paste this command and it will work !! command : npm config set legacy-peer-deps true
@colbyfayock
@colbyfayock 2 ай бұрын
thanks for the tip 👏
@LaxMariappan
@LaxMariappan 2 ай бұрын
Thanks Colby, Xata and Clerk for making it a community resource. I do enjoy your newsletters and content, thanks Colby🚀
@colbyfayock
@colbyfayock 2 ай бұрын
no problem! thanks for your support 🫡 enjoy!
@WebDevCody
@WebDevCody 2 ай бұрын
Commenting for the algorithm
@colbyfayock
@colbyfayock 2 ай бұрын
You the homie 🫶
@Rikearon
@Rikearon 2 ай бұрын
Seems to have worked haha
@colbyfayock
@colbyfayock 2 ай бұрын
@@Rikearon 🚀
@John-eq5cd
@John-eq5cd Ай бұрын
What an interesting approach to use a and action to change the status of the invoice. Also, that was some crazy typescript for the statuses, I will have to go through it slowly. Going back to managing the change in status in the server component, I coded a small client side component specifically for the drop down menu which allowed me to use onClick. Then I imported it into the invoice details page. It seemed to work ok.
@DragosPopescu-n7n
@DragosPopescu-n7n 2 ай бұрын
Awesome work, Colby! Skipping through it for now, and it seems incredibly well made. Thank you for the time and effort to make this. I'm really excited to watch it in full
@colbyfayock
@colbyfayock 2 ай бұрын
thank you! a lot of love went into building it. let me know what you think!
@colbyfayock
@colbyfayock 2 ай бұрын
Where to go next? 👀 - Data Pagination with Suspense: kzbin.info/www/bejne/iJ3do4uJi76Df9k - Generate PDFs: kzbin.info/www/bejne/aoeYeZWnjq92jKs - Realtime Notifications with Knock: kzbin.info/www/bejne/pISYl5-tgbxqfNU
@user-gn8hj2cc6c
@user-gn8hj2cc6c 11 күн бұрын
I think this should be on descriptions
@JianhuaX
@JianhuaX 2 ай бұрын
For whatever reason why the YT algorithm got this video in front of me, I am thankful and immediately subscribed to you and liked the video. I am an Angular dev but I truly enjoy your way of teaching. It makes me think why I haven't picked up React, yet. Bravo Colby! I look forward to picking up more experience tips from you.
@colbyfayock
@colbyfayock 2 ай бұрын
really appreciate the kind words 🙏
@alexgeorge1768
@alexgeorge1768 2 ай бұрын
The way of explaining things are so clean. Much appreciate it.
@colbyfayock
@colbyfayock 2 ай бұрын
no problem!
@erik-lnt
@erik-lnt 2 ай бұрын
Hey Colby, I have to say this is one of the best tutorials I have ever watched! I was searching for something like this for like 4 weeks now (something that includes clerk, drizzle and stripe) and this is just perfect. Thank you for putting valuable information like this out for free. You truly have an amazing way to teach and explain, keep up the good work!
@colbyfayock
@colbyfayock 2 ай бұрын
really appreciate the kind words 🙏
@ONESTTEFTEO
@ONESTTEFTEO 2 ай бұрын
I am a backend developer and new to Next.js. This tutorial has inspired me to start learning Next.js
@colbyfayock
@colbyfayock 2 ай бұрын
awesome, it's a great framework, hope it helps ease your way into the frontend
@gauravarya8952
@gauravarya8952 16 күн бұрын
@@colbyfayock You are superb my friend. Such a brilliant tutorial. I learned so much. I really appreciate you Colby. Blessings to you bro.
@melik2625
@melik2625 2 ай бұрын
Unlike other tutorials he is showing what impact his code is making. He also shows the best approach and practices which is very important for scalability. Hope i had tutorials like these when i was a beginner.
@colbyfayock
@colbyfayock 2 ай бұрын
appreciate that 🙏
@chrschoeni
@chrschoeni Ай бұрын
Hi Coby, I just wanted to say thank you for your fantastic video where you showed how to create a learning platform using Next.js, Clerk, and Stripe. Your approach and explanations were incredibly helpful and gave me valuable insights. It’s truly inspiring how clearly and structured you explain complex topics. Thanks to you, I was able to implement some ideas in my own projects. Keep up the great work-your content is truly valuable! Best regards, Christoph
@colbyfayock
@colbyfayock Ай бұрын
thanks for the kind words! glad it's been helpful for you 🙌
@rasikjain7794
@rasikjain7794 Ай бұрын
Hi Colby, YT has recommended this channel. Very informative and detailed oriented for a person to follow along. This is helpful for anyone newbies who are interested in learning concepts of css, react, typescript, sql, apis, deployment etc. I like the way you do use the multi-cursor for the editing. A video on VS extensions you use and especially multicursor video will be helpful.
@colbyfayock
@colbyfayock Ай бұрын
glad you found it helpful!! ill keep that video idea in mind, thanks
@AnthonyObi-wr6ro
@AnthonyObi-wr6ro 2 ай бұрын
KZbin Algo just brought this to me and I am really enjoying. Have gone through your channel and saw amazing content. Glad to meet you. You just earned a subscriber
@colbyfayock
@colbyfayock 2 ай бұрын
Thank you!! 🙌
@skverskk
@skverskk 26 күн бұрын
Definitrly, one of the better you tube channels for nextjs. Easy to follow and well explained
@colbyfayock
@colbyfayock 25 күн бұрын
thanks 🙏
@VincentFulco
@VincentFulco 2 ай бұрын
Thanks Colby! I've been holding off on building with 15 due to all the canary changes. I appreciate this road map to the future!
@colbyfayock
@colbyfayock 2 ай бұрын
no problem! lots of good stuff in there
@VincentFulco
@VincentFulco 2 ай бұрын
Really well done tutorial...
@colbyfayock
@colbyfayock 2 ай бұрын
@@VincentFulco thank you 🙏
@Code-sz9db
@Code-sz9db 2 ай бұрын
I look forward for this kind of format! I'm really glad to see a real project-based video!
@colbyfayock
@colbyfayock Ай бұрын
yeahhh! hope you enjoy it!
@tedb4440
@tedb4440 2 ай бұрын
This is just amazing!!! I missed you on egghead, and suddenly the youtube algo gods suggested you. So excited to work through this, can't wait!! Great stuff @colby!🔥
@colbyfayock
@colbyfayock 2 ай бұрын
thank you 🙏
@StanislausKatczinsky
@StanislausKatczinsky Ай бұрын
Subsriber earned. Just the intro is enough to show that you will learn something from this and not just mindlessly type what you see in the video. Keep it up. Will check your other videos.
@colbyfayock
@colbyfayock Ай бұрын
thank you 🙏
@mahmoudtokura
@mahmoudtokura 2 ай бұрын
I learned a lot from this. No time wasted, straight-up valuable information. Thanks Subbed
@colbyfayock
@colbyfayock 2 ай бұрын
thank you!
@adnanamin3666
@adnanamin3666 2 ай бұрын
Man! I love you!! I've been wondering when you were going to share the full project. Thank you! 🙏🙏
@colbyfayock
@colbyfayock 2 ай бұрын
🫡 lmk what you think!
@markus_dev_cwb
@markus_dev_cwb 2 ай бұрын
Awesome Project Colby!
@colbyfayock
@colbyfayock 2 ай бұрын
Thank you!
@tumon001
@tumon001 2 ай бұрын
I'm your old fan and I always loved your content.
@colbyfayock
@colbyfayock Ай бұрын
thank you for your support 🙏
@Website_TV_1
@Website_TV_1 2 ай бұрын
Next.js 15 is here, and it’s a game-changer! Learn how to build a fully-functional Invoice App step-by-step in this video. Whether you’re a beginner or an experienced developer, you’ll pick up valuable tips and tricks. 💻💡 👉 Time to level up your coding skills! If you want to master Next.js and create powerful apps like this, make sure to stick around till the end! 👍 Don't forget to like, subscribe, and share with fellow developers! ⏱ Timestamps: 0:00 Introduction & App Overview 2:30 Setting up Next.js 15 8:45 Building Invoice UI Components 15:20 Handling Data & State Management 22:50 Adding Custom Features 28:35 Deploying the Invoice App
@ktappdev
@ktappdev 2 ай бұрын
IDK how i'm only now discovering your channel sir, thank you
@colbyfayock
@colbyfayock 2 ай бұрын
🫡
@ExperiencePlusDigital
@ExperiencePlusDigital Ай бұрын
This is amazing🎉. Would be fantastic to have a similar video dealing with media (image, video and audio) how to store them (uploadthing, cloudinary, Vercel Blob, etc) and how to use them in a efficient way (cropped, reduced image sizes, ai edited). For me that is the missing understanding, compared to using traditional CMS systems (Drupal, Wordpress) in a headless manner.
@colbyfayock
@colbyfayock Ай бұрын
thanks! cool idea
@UAng-ro9kt
@UAng-ro9kt Ай бұрын
what's the vscode icon theme in explorer you used? it looks nice.
@colbyfayock
@colbyfayock 29 күн бұрын
I didnt know my Icons weren't standard 👀 I use the Night Owl theme though vscodethemes.com/e/sdras.night-owl/night-owl
@JoseLopez-me2re
@JoseLopez-me2re 2 ай бұрын
Thank you for this great course Colby. Loving every second of it! ❤
@colbyfayock
@colbyfayock 2 ай бұрын
love to hear it!
@ahmedabdelmeguid1131
@ahmedabdelmeguid1131 9 күн бұрын
perfect video ,we need more videos like this in next.js and react
@colbyfayock
@colbyfayock 8 күн бұрын
thanks 🙏
@mileslegend
@mileslegend 2 ай бұрын
was looking for something like this ..thanks man ..i will surely build this with you
@colbyfayock
@colbyfayock 2 ай бұрын
no problem! let me know how you come out
@taffoo
@taffoo 2 ай бұрын
Well done Colby! Super nice project, learned some new stuff. Regarding the Dialog not looking correct I think that was because you added the DialogFooter by mistake inside the DialogHeader 😉
@colbyfayock
@colbyfayock 2 ай бұрын
oof thanks for the heads up 🙈
@jamesgrubb
@jamesgrubb 2 ай бұрын
Great job and and thank you for the hard work on this resource.
@colbyfayock
@colbyfayock 2 ай бұрын
thank you for your support 🙏
@gephreychen6211
@gephreychen6211 Ай бұрын
such gr8 content and such an excellent teacher. Best of the yr, thank you!
@colbyfayock
@colbyfayock Ай бұрын
thank you 🙏
@mjylove2
@mjylove2 Ай бұрын
everything so clearly explained 😊
@colbyfayock
@colbyfayock Ай бұрын
thank you!
@notjustdev
@notjustdev 2 ай бұрын
This is goldeeeen!
@colbyfayock
@colbyfayock 2 ай бұрын
thanks 🙌 you give a lot to aspire to with these kinds of courses 🫡
@John-eq5cd
@John-eq5cd Ай бұрын
Enjoying the content so far, thanks Colby. Is it too simplistic to suggest a 'View' button for each row with the link to the specific invoice details?
@colbyfayock
@colbyfayock Ай бұрын
definitely a good idea!
@coderyan
@coderyan 2 ай бұрын
Awesome job, Colby!
@colbyfayock
@colbyfayock 2 ай бұрын
thanks Ryan 🙌
@adeyalshire5724
@adeyalshire5724 2 ай бұрын
Very good video, the explanations are clear . Great job !!!!!
@colbyfayock
@colbyfayock 2 ай бұрын
thank you!
@JoseLopez-me2re
@JoseLopez-me2re Ай бұрын
Hey Colby, I have a question regarding Security best practices. At around 2:57:00 you create the Invoice.tsx client component and eliminate all the backend logic from it. But still you import the Invoice schema into a client component. Isn't that giving away information about how our database is structured, tables, fields, etc. to the client?
@colbyfayock
@colbyfayock Ай бұрын
thats an interesting question, but generally speaking and i'd have to remember the exact context, but on that client component, i only use it for the TS definitions which would get stripped: github.com/colbyfayock/my-invoicing-app/blob/main/src/app/invoices/%5BinvoiceId%5D/Invoice.tsx
@JoseLopez-me2re
@JoseLopez-me2re Ай бұрын
@colbyfayock help!
@Debargha16
@Debargha16 23 күн бұрын
Hey since next js is serverless framework so should you be using pool? As the lambda functions take some time to settle down so in mean time all your connection may get exhausted . So I think it's better to use xata-http instead of pooling the connections?
@akashkinkarpandey9788
@akashkinkarpandey9788 2 ай бұрын
Anyone else getting the error Application error: a client-side exception has occurred (see the browser console for more information). on dashboard page ? I am around 1:43:00
@i_vishalsah01
@i_vishalsah01 2 ай бұрын
that's some quality content and very clearly explained concepts people should know more about this and this page....👌👌
@colbyfayock
@colbyfayock 2 ай бұрын
Thank you!!
@normb9785
@normb9785 2 ай бұрын
Hey Colby 👋🏾 love your tutorials, very calming and easy to follow. Now I have to ask what VSCode theme are you using?
@colbyfayock
@colbyfayock 2 ай бұрын
thanks 😁 Night Owl! marketplace.visualstudio.com/items?itemName=sdras.night-owl
@YuriyChamkoriyski
@YuriyChamkoriyski Ай бұрын
Hi, Colby! Thanks for the comprehensive and full of new stuff tutorial. It is a great learning material. I have a question, though. Am I the only one who experience a problem with the searchParams. At around 4:06:40, when you define isSuccess and isCanceled constants and tried to console log them I am getting always false for both of them, regardless of setting the parameter manaually in the URL to "success" or "cancel" and even after a successful payment, which is working and I am getting the success in the URL automatically, those two constans never change values and that is why the updateStatusAction never fires, so the status is never updated. I concole log the searchParams.status itself and it is undefined! So, what am I doing wrong? Thanks for you time and consideration.
@colbyfayock
@colbyfayock Ай бұрын
hey did you happen to compare what you're doing to the code? github.com/colbyfayock/my-invoicing-app/blob/main/src/app/invoices/%5BinvoiceId%5D/payment/page.tsx#L26-L34
@harsimransingh1025
@harsimransingh1025 Ай бұрын
I encountered the same problem. This worked for me to get the status right: let pstate; try { pstate = await searchParams; console.log("Status:", pstate.status); } catch (error) { console.error("Error:", error); } const isSuccess = pstate?.status === "success"; const isCanceled = pstate?.status === "canceled";
@colbyfayock
@colbyfayock Ай бұрын
hey did you compare what im doing in the code here? github.com/colbyfayock/my-invoicing-app/blob/main/src/app/invoices/%5BinvoiceId%5D/payment/page.tsx#L26-L35
@smellfungussports
@smellfungussports 2 ай бұрын
Great stuff Colby. Any idea of extending this to real time notifications?
@colbyfayock
@colbyfayock 2 ай бұрын
thank you!! i dont plan on creating a direct extension, however i have a separate video with the same base app that uses Knock for the realtime notifications: kzbin.info/www/bejne/pISYl5-tgbxqfNU
@langagama
@langagama Ай бұрын
can i use any other payment system besides stripe?
@sam-j4zy
@sam-j4zy 2 ай бұрын
nice project thanks for sharing.
@colbyfayock
@colbyfayock 2 ай бұрын
no problem, enjoy!
@Daniel-D137
@Daniel-D137 2 ай бұрын
Awesome, many thanks!
@colbyfayock
@colbyfayock 2 ай бұрын
You're welcome!
@succatash
@succatash 2 ай бұрын
High quality content
@colbyfayock
@colbyfayock 2 ай бұрын
🙏
@Deus-lo-Vuilt
@Deus-lo-Vuilt 2 ай бұрын
Great, I leave like and sub , I will start the project now.
@colbyfayock
@colbyfayock 2 ай бұрын
Thanks for the support!
@TrostCodes
@TrostCodes 2 ай бұрын
Amazing stuff, dude!
@colbyfayock
@colbyfayock 2 ай бұрын
thanks Alex 🙏 appreciate your support
@nikolas4749
@nikolas4749 2 ай бұрын
Thanks Colby react router lauch v7 pre release two weeks ago. It include most remix functionality. Would you consider making a full stack app with react router ?
@colbyfayock
@colbyfayock 2 ай бұрын
i love that idea! Ive been meaning to spin up on it. admittedly it would take a lot of prep as i want to be comfortable enough with the APIs to clearly explain them, but i'll add that ot my list to start exploring!
@sahilgupta-f3m
@sahilgupta-f3m 2 ай бұрын
what shortcut did you use for selecting and inserting mutliple line , time = 16:34
@colbyfayock
@colbyfayock 2 ай бұрын
I use CMD+D after selecting something to select similar values. though im not sure if thats a native shortcut or if that's the sublime text keybindings i have installed, but then from there, i use CMD+Arrow to go to the end of the line
@JoseLopez-me2re
@JoseLopez-me2re 2 ай бұрын
Wow, thank you so much Colby. I am still hoping for your NextJS 15 course, any updates on when you are releasing it? EDIT: I think this was the much awaited course, I thought it was going to be a premium (paid) course! Or am I missing something? Thank you Colby!
@colbyfayock
@colbyfayock 2 ай бұрын
this is the course! thanks to Xata and Clerk I was able to publish it for free and make it available to all 🚀
@JoseLopez-me2re
@JoseLopez-me2re 2 ай бұрын
@@colbyfayock Great! Thank you !!
@Gabriel-kl6bt
@Gabriel-kl6bt 10 күн бұрын
Why won't your code show errors I am facing when using server actions?
@gergoviktorjordan8103
@gergoviktorjordan8103 2 ай бұрын
Great video, I like it, but at 2:51:20 I got this bug on my form action and I cannot process forward :( I hope somebody can help to solve this. Paid
@doxlebuild6317
@doxlebuild6317 Ай бұрын
yes getting an error with server side forms, once i click the drop down the updateStatusAction is not triggering. I checked the network tab also, I think the Radix's dropdown is closing before the form is submitted. Spend an hour on this :( and tried to have a client wrapper or change the drop down item to div may be. "he form submission is interrupted, causing the "Form submission canceled because the form is not connected" error." Get this error on console. Any help would be greatly appreciated. Colby you are a legend. Thx man
@JA1810HV
@JA1810HV 2 ай бұрын
How did it took the whole screen with h-full in 11:15 ? Making the main take 100% does not mean it will stretch the parent body element.
@colbyfayock
@colbyfayock 2 ай бұрын
i have min-h-screen on the body
@JA1810HV
@JA1810HV 2 ай бұрын
@@colbyfayock Oh I see, thanks
@00chilli00
@00chilli00 25 күн бұрын
@@colbyfayock I'm having the same problem - I set min-h-screen on the body but it isn't working. If I set height:100% on the html it works?
@jakubpalka8093
@jakubpalka8093 2 ай бұрын
Hey Colby, I'm having an issue with ClerkProvider. I'm getting the error: useClerk can only be used within the component. But everything is wrapped inside this element. Any advice?
@colbyfayock
@colbyfayock 2 ай бұрын
do you have it in the same location as in the video? github.com/colbyfayock/my-invoicing-app/blob/dd91115e86c6557738eed2930a77f1b9edfc1c06/src/app/layout.tsx#L1 where are you trying to use it in that context?
@eliuddyn
@eliuddyn 2 ай бұрын
Amazing 🔥🔥
@colbyfayock
@colbyfayock 2 ай бұрын
thank you!
@janmalmur1244
@janmalmur1244 Ай бұрын
Can I ask you why when i make code from chapter "Dynamic Page Routes for Invoices" i get an error "Error: Route "/invoices/[invoiceId]" used `params.invoiceId`. `params` should be awaited before using its properties." I dont know how to fix it :/
@colbyfayock
@colbyfayock Ай бұрын
Next.js released a last minute change before publishing 15 stable that makes searchParams an async API: nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional
@mohamedbenighil1026
@mohamedbenighil1026 2 ай бұрын
hi Colby, thank you for the awsome course! i am at the beggining of the video trying to center the of the page With : export default function Home() { return ( Invoicipedia Login ); } i got the the content center between left and right but NOT left and right and top and bottom like your result, can you tell me what is messing please ?
@colbyfayock
@colbyfayock 2 ай бұрын
did you set min-h-screen on the parent inside of the layout? github.com/colbyfayock/my-invoicing-app/blob/main/src/app/layout.tsx#L34
@jojoarqw
@jojoarqw Ай бұрын
Hey I got the following problem: Im setting up the database with Xata but as i try to implement the "const results" following Error comes to me for that line 11: "[ Server ] Error: An error occurred in the Server Components render but no message was provided". It wont fetch data? Then I finished the database-configuration but it wont connect to the database. Do you know what i could do to fix this?
@colbyfayock
@colbyfayock Ай бұрын
first thign id recommend is try comparing your code tow hat i got: github.com/colbyfayock/my-invoicing-app maybe try adding at try/catch around the request to see if its throwing an error that has some useful info?
@Kunal_Rai
@Kunal_Rai 2 ай бұрын
Amazing work! Maybe a video working with cursor AI
@colbyfayock
@colbyfayock 2 ай бұрын
nice idea!
@fullstackspiderman
@fullstackspiderman 2 ай бұрын
Thank you so much sir ❤
@colbyfayock
@colbyfayock 2 ай бұрын
🫡
@tobiasjennerjahn8659
@tobiasjennerjahn8659 Ай бұрын
Is the hidden forms 'trick' really idiomatic react/next? That feels very hacky imo. But maybe it's just because I'm not used to it.
@colbyfayock
@colbyfayock Ай бұрын
its not a trick... its a valid HTML input type and has been commonly used with forms for years and years and years
@tobiasjennerjahn8659
@tobiasjennerjahn8659 Ай бұрын
@@colbyfayock Thanks, I appreciate the answer. This just isn't a setup I've really encountered before and using hidden elements just to pass a bit of data felt a bit off. Good to know that this is a common practice and wouldn't be out of place in a bigger project.
@wirapramuja007
@wirapramuja007 2 ай бұрын
hello colby, i caucht on error "Cannot find module 'next/form' or its corresponding type declarations." i have browsing and i cannot find doc to fix this issues can you figure this out? Module not found: Can't resolve 'next/form'
@colbyfayock
@colbyfayock 2 ай бұрын
hey did you upgrade to the canary version of Next.js? should be in the video somewhere around there
@erik-lnt
@erik-lnt 2 ай бұрын
I had it working for 1 day with the form component from next but then suddenly it din't work any more. I fixed it by just using the regular form component again. Maybe that'll fix it for you, too.
@abdelrahmanmostafa9489
@abdelrahmanmostafa9489 2 ай бұрын
Xata is the best❤❤
@colbyfayock
@colbyfayock 2 ай бұрын
💯
@anaf.2715
@anaf.2715 2 ай бұрын
That’s amazing!!!!
@colbyfayock
@colbyfayock 2 ай бұрын
😉
@pushingpixels98
@pushingpixels98 Ай бұрын
Is ut possble for me to allow the client to make a payment directly to my bank account without using third pary softwares such as tripe or paypal
@colbyfayock
@colbyfayock Ай бұрын
not totally sure but doubt it
@TheRedPheniox
@TheRedPheniox 2 ай бұрын
Great tutorial
@colbyfayock
@colbyfayock 2 ай бұрын
thank you!
@destocot1729
@destocot1729 2 ай бұрын
oh it's a free course your awesome I'll enjoy going through it
@colbyfayock
@colbyfayock 2 ай бұрын
would love to hear what you think as you work thruogh it!
@destocot1729
@destocot1729 2 ай бұрын
​@@colbyfayock about 1/4th through it heres are my thoughts so far NOTES - Styling seems off (ignoring for now since not a focus of the video) - my content seems more centered when yours is left aligned (is bothering me a lot tho) - my content remains at the top when yours is centered - my content seems to have a smaller container - using action AND `onSubmit` together - never seen this before !?!? the `createInvoice` action is being called into the action and `handleSubmit` is it guaranteed that both of them will not run? UPDATED COMMENTS: - you removed the `createInvoice` action from `handleSubmit` later on that just made it confusing why it was showcased in the first place - When JavaScript is disabled you are still able to spam the submit form and create multiple entries (maybe there is no way to avoid this?) TESTS: - I removed the `handleSubmit` as well as the `useState('ready')` entirely it did not seem to affect anything? More questions as to why this part was added - I recommend 'opacity-0' or 'hidden' instead of 'text-transparent' where you can still the text by clicking/highlighting the button (stopped before integrating clerk for now) explanation of error.tsx and loading.tsx were good is the NextError component new? PERSONAL: - why do you wrap buttons in p tag? - what do you think about the fact that /invoices/new and /invoices/[invoiceId] both live on the same segment of /invoices/X I've done it before many times it just feels weird, was wondering if thats a bad practice or not? maybe its okay because in this case our invocieId is an int but what if it was a uuid would the thought process change?
@CarlosTello-h5s
@CarlosTello-h5s 8 күн бұрын
looks great!
@colbyfayock
@colbyfayock 8 күн бұрын
thanks 🙌
@MrNimbus3000
@MrNimbus3000 2 ай бұрын
In my case it was required to use `config({ path: "./.env.local", override: true });` to make migration working
@nishithkhambhati3260
@nishithkhambhati3260 2 ай бұрын
Where is products details ?
@colbyfayock
@colbyfayock 2 ай бұрын
could you elaborate on your question? what product and what specifically are you looking for?
@Armys2940
@Armys2940 2 ай бұрын
Why my dynamic route is not working like it gives me the invoice id NaN i debugged it same issue
@colbyfayock
@colbyfayock 2 ай бұрын
the value should only be NaN after parseInt, did you test the value coming out of the parameters? console log it out into the terminal
@Armys2940
@Armys2940 2 ай бұрын
@@colbyfayock DONE Sir
@Armys2940
@Armys2940 2 ай бұрын
@@colbyfayock Error Solved
@colbyfayock
@colbyfayock 2 ай бұрын
@@Armys2940 💯
@MrNimbus3000
@MrNimbus3000 2 ай бұрын
Regarding 2:49:05 I did it in a next way (we are not using type assertions): ``` const statuses = AVAILABLE_STATUSES.map((status) => status.id); export const statusEnum = pgEnum("status", [statuses[0], ...statuses.slice(1)]); ```
@colbyfayock
@colbyfayock 2 ай бұрын
oh nice one!
@i_vishalsah01
@i_vishalsah01 2 ай бұрын
Displaying all invoices for public demo. Creation is disabled. Am I doing something wrong cuz console show's no error and app runs fine but i'm unable to create any invoice can anyone help!!! please
@colbyfayock
@colbyfayock 2 ай бұрын
Are you referring to my public demo? It's not intended for public use
@i_vishalsah01
@i_vishalsah01 2 ай бұрын
@@colbyfayock oo okay i created my own version of it api keys, xata, clerk of my own and made some changes..
@VLADICA94KG
@VLADICA94KG Ай бұрын
4:16:15 line 32 isError conditions contradicts each other : D
@projectroxas3307
@projectroxas3307 2 ай бұрын
I really can't figure out what's happening sadly... I also cloned your repo, so I could verify if something broke all of a sudden but it seems I'm the only one who is dealing with the following error: Internal error: TypeError: Cannot create property 'digest' on string 'This object has been omitted by React in the console log to avoid sending too much data from the server. Try logging smaller or more specific objects.' This error occurs in the /dashboard page, I stopped at around 1.28.00 timestamp of the video, and if I try to render my component with CSR, everything works fine (but of course in this case I was not retrieving anything from the database) but the issue arises when I try with SSR, and specifically when I try to render the shadcn components such as TableRow, TableCell and TableHead, the rest are fine. I don't know what's wrong, did you encounter the same issue?
@colbyfayock
@colbyfayock 2 ай бұрын
sorry i didnt hit that error... not totally sure what it could be
@wbecher
@wbecher 2 ай бұрын
I`m having trouble with the redirect after delete... my server action is like this: export async function deleteSessionAction(formData: FormData) { console.log("inicia processo de delete"); const { userId } = auth(); if (!userId) { return; } const sessionId = formData.get("id") as string; await db .delete(Sessoes) .where( and(eq(Sessoes.id, parseInt(sessionId)), eq(Sessoes.userId, userId)) ); redirect("/dashboard"); } If I comment the db.delete command, the redirect works fine... but with the code uncommented, the redirect fails:
@colbyfayock
@colbyfayock 2 ай бұрын
its possible it's failing, try wrapping the db call with a try/catch and logging out the results, that might give you a clue
@wbecher
@wbecher 2 ай бұрын
@@colbyfayock The delete works on the database... that's the odd part... the record is deleted on the database, but the redirect fails. I'm getting crazy! This is the result of the delete command: ------------------------------------- Result { command: 'DELETE', rowCount: 1, oid: null, rows: [], fields: [], _parsers: undefined, _types: TypeOverrides { _types: { getTypeParser: [Function: getTypeParser], setTypeParser: [Function: setTypeParser], arrayParser: [Object], builtins: [Object] }, text: {}, binary: {} }, RowCtor: null, rowAsArray: false, _prebuiltEmptyResultObject: null } -------------------------------------
@wbecher
@wbecher 2 ай бұрын
------------------------------------- Result { command: 'DELETE', rowCount: 1, oid: null, rows: [], fields: [], _parsers: undefined, _types: TypeOverrides { _types: { getTypeParser: [Function: getTypeParser], setTypeParser: [Function: setTypeParser], arrayParser: [Object], builtins: [Object] }, text: {}, binary: {} }, RowCtor: null, rowAsArray: false, _prebuiltEmptyResultObject: null } -------------------------------------
@Remi___________________416
@Remi___________________416 2 ай бұрын
are the services all free?
@colbyfayock
@colbyfayock 2 ай бұрын
all services have a generous free tier!
@aldikrasniqi739
@aldikrasniqi739 2 ай бұрын
Commenting for the algorithm too
@colbyfayock
@colbyfayock 2 ай бұрын
🫶 you da best
@MaziSaidSo
@MaziSaidSo 2 ай бұрын
Great Stuff !
@colbyfayock
@colbyfayock 2 ай бұрын
Thanks!
@riham644
@riham644 2 ай бұрын
Thanks in advance ❤
@colbyfayock
@colbyfayock 2 ай бұрын
🫡
@CodeCraftAcademy-dd1qd
@CodeCraftAcademy-dd1qd 2 ай бұрын
I love you so much. Thank you :)
@colbyfayock
@colbyfayock 2 ай бұрын
🫶 no problem!
@adeonir
@adeonir 2 ай бұрын
Awesome ❤
@colbyfayock
@colbyfayock 2 ай бұрын
thanks 🙌
@irfaanvallapilm3847
@irfaanvallapilm3847 2 ай бұрын
thanks for this
@colbyfayock
@colbyfayock 2 ай бұрын
thank you 🙏
@meciau
@meciau 2 ай бұрын
this is quality!
@colbyfayock
@colbyfayock 2 ай бұрын
thank you 🙌
@cb73
@cb73 2 ай бұрын
isn’t it funny that the theme that is “default” selected in shadcn is not in fact the “default” theme
@colbyfayock
@colbyfayock 2 ай бұрын
👀
@henrymunoz2035
@henrymunoz2035 2 ай бұрын
Wow you are amazing
@colbyfayock
@colbyfayock 2 ай бұрын
🙏
@life0fmeek
@life0fmeek 2 ай бұрын
Colby!
@colbyfayock
@colbyfayock 2 ай бұрын
🙌
@jordon7999
@jordon7999 2 ай бұрын
epic 🎉
@colbyfayock
@colbyfayock 2 ай бұрын
🫡
@deniswarsidin9402
@deniswarsidin9402 Ай бұрын
For one who not fluent in english you can try 0.75x
@Nisha-nb6rv
@Nisha-nb6rv 2 ай бұрын
is all things u used free?
@colbyfayock
@colbyfayock 2 ай бұрын
everything has a free trial except Stripe which is transaction based
@remember.772
@remember.772 9 күн бұрын
​@colbyfayock does this mean it won't work after I deploy it after some days or months?
@SayfSentinel
@SayfSentinel 2 ай бұрын
What in the Chatgpt is this GEM 💎?!
@colbyfayock
@colbyfayock 2 ай бұрын
@browninc254
@browninc254 2 ай бұрын
Awesome
@colbyfayock
@colbyfayock 2 ай бұрын
🙌
@whizzie3367
@whizzie3367 2 ай бұрын
❤❤
@colbyfayock
@colbyfayock 2 ай бұрын
🫶
@cant_sleeeep
@cant_sleeeep 2 ай бұрын
why drizzle? why not prisma? just about i got used to prisma this comes up ffs
@colbyfayock
@colbyfayock 2 ай бұрын
i dont have experience with Prisma yet but I really enjoyed the Drizzle APIs. while I totally get the pain of switching tools, definitely worth having a basic understanding of each to see which you prefer, the concepts should apply to both, but with different syntax.
@054m4
@054m4 2 ай бұрын
PHP Can does the same in almost 1/4 time and without all these external integrations 😀
@colbyfayock
@colbyfayock 2 ай бұрын
you must be a 10x dev
@CarlosTello-m8h
@CarlosTello-m8h 2 ай бұрын
nice
@colbyfayock
@colbyfayock 2 ай бұрын
Thanks!
Is Next.js 15 any good? "use cache" API first look
8:16
Beyond Fireship
Рет қаралды 127 М.
Build and Deploy a Full Stack Realtime Chat Messaging App with NextJS 13
8:28:22
REAL or FAKE? #beatbox #tiktok
01:03
BeatboxJCOP
Рет қаралды 18 МЛН
СИНИЙ ИНЕЙ УЖЕ ВЫШЕЛ!❄️
01:01
DO$HIK
Рет қаралды 3,3 МЛН
小丑女COCO的审判。#天使 #小丑 #超人不会飞
00:53
超人不会飞
Рет қаралды 16 МЛН
Next.js 15 Breakdown (Everything You Need To Know)
18:10
Web Dev Simplified
Рет қаралды 85 М.
I built a REAL Desktop App with both Tauri and Electron
12:22
Bufferhead
Рет қаралды 84 М.
How To Build A $1,000,000 SaaS In 7 Hours
6:30:15
Web Dev Simplified
Рет қаралды 103 М.
STOP Making these Security Mistakes in Next.js
32:14
Jan Marshal
Рет қаралды 14 М.
All 29 Next.js Mistakes Beginners Make
1:45:10
ByteGrad
Рет қаралды 156 М.
I Redesigned the ENTIRE YouTube UI from Scratch
19:10
Juxtopposed
Рет қаралды 773 М.
Next.js 15 Crash Course | Build and Deploy a Production-Ready Full Stack App
5:23:11
10 common mistakes with the Next.js App Router
20:37
Vercel
Рет қаралды 236 М.
REAL or FAKE? #beatbox #tiktok
01:03
BeatboxJCOP
Рет қаралды 18 МЛН