Build an Invoice App with Next.js 15

[@punitmistry2406]

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]

thanks for the tip 👏

[@LaxMariappan]

Thanks Colby, Xata and Clerk for making it a community resource. I do enjoy your newsletters and content, thanks Colby🚀

[@colbyfayock]

no problem! thanks for your support 🫡 enjoy!

[@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.

[@WebDevCody]

Commenting for the algorithm

[@colbyfayock]

You the homie 🫶

[@Rikearon]

Seems to have worked haha

[@colbyfayock]

@@Rikearon 🚀

[@ONESTTEFTEO]

I am a backend developer and new to Next.js. This tutorial has inspired me to start learning Next.js

[@colbyfayock]

awesome, it's a great framework, hope it helps ease your way into the frontend

[@melik2625]

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]

appreciate that 🙏

[@JianhuaX]

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]

really appreciate the kind words 🙏

[@erik-lnt]

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]

really appreciate the kind words 🙏

[@DragosPopescu-n7n]

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]

thank you! a lot of love went into building it. let me know what you think!

[@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]

glad you found it helpful!! ill keep that video idea in mind, thanks

[@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]

thanks! cool idea

[@alexgeorge1768]

The way of explaining things are so clean. Much appreciate it.

[@colbyfayock]

no problem!

[@Code-sz9db]

I look forward for this kind of format! I'm really glad to see a real project-based video!

[@colbyfayock]

yeahhh! hope you enjoy it!

[@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]

thank you 🙏

[@AnthonyObi-wr6ro]

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]

Thank you!! 🙌

[@tedb4440]

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]

thank you 🙏

[@VincentFulco]

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]

no problem! lots of good stuff in there

[@VincentFulco]

Really well done tutorial...

[@colbyfayock]

@@VincentFulco thank you 🙏

[@adnanamin3666]

Man! I love you!! I've been wondering when you were going to share the full project. Thank you! 🙏🙏

[@colbyfayock]

🫡 lmk what you think!

[@mahmoudtokura]

I learned a lot from this. No time wasted, straight-up valuable information. Thanks Subbed

[@colbyfayock]

thank you!

[@ktappdev]

IDK how i'm only now discovering your channel sir, thank you

[@colbyfayock]

🫡

[@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]

definitely a good idea!

[@JoseLopez-me2re]

Thank you for this great course Colby. Loving every second of it! ❤

[@colbyfayock]

love to hear it!

[@tumon001]

I'm your old fan and I always loved your content.

[@colbyfayock]

thank you for your support 🙏

[@taffoo]

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]

oof thanks for the heads up 🙈

[@mileslegend]

was looking for something like this ..thanks man ..i will surely build this with you

[@colbyfayock]

no problem! let me know how you come out

[@gephreychen6211]

such gr8 content and such an excellent teacher. Best of the yr, thank you!

[@colbyfayock]

thank you 🙏

[@normb9785]

Hey Colby 👋🏾 love your tutorials, very calming and easy to follow. Now I have to ask what VSCode theme are you using?

[@colbyfayock]

thanks 😁 Night Owl! marketplace.visualstudio.com/items?itemName=sdras.night-owl

[@jamesgrubb]

Great job and and thank you for the hard work on this resource.

[@colbyfayock]

thank you for your support 🙏

[@JoseLopez-me2re]

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]

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]

@@colbyfayock Great! Thank you !!

[@smellfungussports]

Great stuff Colby. Any idea of extending this to real time notifications?

[@colbyfayock]

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

[@markus_dev_cwb]

Awesome Project Colby!

[@colbyfayock]

Thank you!

[@i_vishalsah01]

that's some quality content and very clearly explained concepts people should know more about this and this page....👌👌

[@colbyfayock]

Thank you!!

[@adeyalshire5724]

Very good video, the explanations are clear . Great job !!!!!

[@colbyfayock]

thank you!

[@notjustdev]

This is goldeeeen!

[@colbyfayock]

thanks 🙌 you give a lot to aspire to with these kinds of courses 🫡

[@coderyan]

Awesome job, Colby!

[@colbyfayock]

thanks Ryan 🙌

[@colbyfayock]

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

[@Deus-lo-Vuilt]

Great, I leave like and sub , I will start the project now.

[@colbyfayock]

Thanks for the support!

[@sam-j4zy]

nice project thanks for sharing.

[@colbyfayock]

no problem, enjoy!

[@nikolas4749]

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]

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!

[@succatash]

High quality content

[@colbyfayock]

🙏

[@Website_TV_1]

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

[@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]

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]

@colbyfayock help!

[@Daniel-D137]

Awesome, many thanks!

[@colbyfayock]

You're welcome!

[@Kunal_Rai]

Amazing work! Maybe a video working with cursor AI

[@colbyfayock]

nice idea!

[@langagama]

can i use any other payment system besides stripe?

[@sahilgupta-f3m]

what shortcut did you use for selecting and inserting mutliple line , time = 16:34

[@colbyfayock]

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

[@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]

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]

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]

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

[@TrostCodes]

Amazing stuff, dude!

[@colbyfayock]

thanks Alex 🙏 appreciate your support

[@MrNimbus3000]

In my case it was required to use `config({ path: "./.env.local", override: true });` to make migration working

[@destocot1729]

oh it's a free course your awesome I'll enjoy going through it

[@colbyfayock]

would love to hear what you think as you work thruogh it!

[@destocot1729]

​@@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?

[@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]

its not a trick... its a valid HTML input type and has been commonly used with forms for years and years and years

[@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.

[@mohamedbenighil1026]

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]

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

[@abdelrahmanmostafa9489]

Xata is the best❤❤

[@colbyfayock]

💯

[@jakubpalka8093]

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]

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?

[@MrNimbus3000]

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]

oh nice one!

[@aldikrasniqi739]

Commenting for the algorithm too

[@colbyfayock]

🫶 you da best

[@fullstackspiderman]

Thank you so much sir ❤

[@colbyfayock]

🫡

[@akashkinkarpandey9788]

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

[@TheRedPheniox]

Great tutorial

[@colbyfayock]

thank you!

[@anaf.2715]

That’s amazing!!!!

[@colbyfayock]

😉

[@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]

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

[@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]

not totally sure but doubt it

[@VLADICA94KG]

4:16:15 line 32 isError conditions contradicts each other : D

[@JA1810HV]

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]

i have min-h-screen on the body

[@JA1810HV]

@@colbyfayock Oh I see, thanks

[@projectroxas3307]

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]

sorry i didnt hit that error... not totally sure what it could be

[@life0fmeek]

Colby!

[@colbyfayock]

🙌

[@gergoviktorjordan8103]

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]

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

[@eliuddyn]

Amazing 🔥🔥

[@colbyfayock]

thank you!

[@cb73]

isn’t it funny that the theme that is “default” selected in shadcn is not in fact the “default” theme

[@colbyfayock]

👀

[@riham644]

Thanks in advance ❤

[@colbyfayock]

🫡

[@CodeCraftAcademy-dd1qd]

I love you so much. Thank you :)

[@colbyfayock]

🫶 no problem!

[@wirapramuja007]

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]

hey did you upgrade to the canary version of Next.js? should be in the video somewhere around there

[@erik-lnt]

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.

[@meciau]

this is quality!

[@colbyfayock]

thank you 🙌

[@MaziSaidSo]

Great Stuff !

[@colbyfayock]

Thanks!

[@i_vishalsah01]

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]

Are you referring to my public demo? It's not intended for public use

[@i_vishalsah01]

@@colbyfayock oo okay i created my own version of it api keys, xata, clerk of my own and made some changes..

[@nishithkhambhati3260]

Where is products details ?

[@colbyfayock]

could you elaborate on your question? what product and what specifically are you looking for?

[@Armys2940]

Why my dynamic route is not working like it gives me the invoice id NaN i debugged it same issue

[@colbyfayock]

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]

@@colbyfayock DONE Sir

[@Armys2940]

@@colbyfayock Error Solved

[@colbyfayock]

@@Armys2940 💯

[@henrymunoz2035]

Wow you are amazing

[@colbyfayock]

🙏

[@irfaanvallapilm3847]

thanks for this

[@colbyfayock]

thank you 🙏

[@whizzie3367]

❤❤

[@colbyfayock]

🫶

[@wbecher]

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]

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]

@@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]

------------------------------------- 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 } -------------------------------------

[@adeonir]

Awesome ❤

[@colbyfayock]

thanks 🙌

[@browninc254]

Awesome

[@colbyfayock]

🙌

[@SayfSentinel]

What in the Chatgpt is this GEM 💎?!

[@colbyfayock]

✨

[@Remi___________________416]

are the services all free?

[@colbyfayock]

all services have a generous free tier!

[@054m4]

PHP Can does the same in almost 1/4 time and without all these external integrations 😀

[@colbyfayock]

you must be a 10x dev

[@jordon7999]

epic 🎉

[@colbyfayock]

🫡

[@CarlosTello-m8h]

nice

[@colbyfayock]

Thanks!

[@cant_sleeeep]

why drizzle? why not prisma? just about i got used to prisma this comes up ffs

[@colbyfayock]

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.

[@Nisha-nb6rv]

is all things u used free?

[@colbyfayock]

everything has a free trial except Stripe which is transaction based

[@OmarLahsenRamirez-cn9kg]

I love you

[@colbyfayock]

🫶

[@psmontte]

Seriously! Have you seen an Invoice, in your life?

[@colbyfayock]

🤨

[@smellfungussports]

This is a NextJS tutorial, not a commerce tutorial.

[@MrNimbus3000]

Is it a clickbait? There is no Next 15 in this course. Next 15 is still is "release candidate" phase and can't be insalled even with `latest` flag with CLI. We can confirm that this is still next 14 as well as React 18 according to dev server logs it when author is firsr starting his dev server in the console. Are we going to upgrade Next to version 15 later in the course or the title is wrong? And why we are using src directory anyway if reccommended approach is different?

[@colbyfayock]

sounds like you only watched the first 1m. if not you'll notice it upgrades later when Next.js 15 features that are RC/Canary are used. `src` directory is not an antipattern, you're thinking of `pages` vs `app` which again is not an antipattern, Next.js specifically maintains the Pages router as a valid, supported application path

[@MrNimbus3000]

@@colbyfayock I see. That is exactly what I was asking about. Thanks. Until this point your course looks amazing. I have seen some 1 hour for now

[@sdfsfsfd437]

Aweeesssooomeeee!!!!! 💯❤👍

[@colbyfayock]

🙌

[@YassineZaroui]

const where = orgId ? and(eq(Invoices.id, id), eq(Invoices.organizationId, orgId)) : and( eq(Invoices.id, id), eq(Invoices.userId, userId), isNull(Invoices.organizationId) ); await db .update(Invoices) .set({ status }) .where(where);

[@colbyfayock]

nice