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
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
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.
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.
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.
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!
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
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.
RUclips 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
Where to go next? 👀 - Data Pagination with Suspense: ruclips.net/video/RlzrXSVYPIw/видео.html - Generate PDFs: ruclips.net/video/4V5HbqYJCVI/видео.html - Realtime Notifications with Knock: ruclips.net/video/nS5flwLW7Fs/видео.html
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!🔥
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.
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.
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 😉
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: ruclips.net/video/nS5flwLW7Fs/видео.html
@@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?
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!
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.
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
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";
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
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?
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?
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
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
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 ?
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!
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)]); ```
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
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?
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?
First of all I like this tutorial the best. The instructor make it very easy to follow and understand. I'm totally new on react, Next.js. and almost everting use on this tutorial, but able to follow the tutorial without and difficulty. Great tutorial. I follow the tutorial to the part where we add userId field to the table, then fix the action.ts file. (around 2.24 of the video : ruclips.net/video/Mcw8Mp8PYUE/видео.html) I just can't continue from there, because in line 10 where the video said we don't need to await auth() to access the userId. I just can't access it. Got an error complaining that userId is null when trying to insert the record. (I use not null on the schema) I can get pass that point only with await auth(), otherwise the userId won't be available to use. Did check the documentation on clerk, from what I understand, they said it doesn't need await too. But I can use it only if I put await in front of auth(). Do not know why, but will move forward to the rest of the video for now. Thank you very much for making this video tutorial.
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
@@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.
I get @54:07: "npm run generate > invoicing-app@0.1.0 generate > drizzle-kit generate No config path provided, using default 'drizzle.config.ts' Reading config file 'C:...\invoicing-app\drizzle.config.ts' Please set your XATA_DATABASE_URL" Though my file looks just exactly like yours.
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 ?
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?
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?
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 :/
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
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?
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'
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.
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
thanks for the tip 👏
Thanks Colby, Xata and Clerk for making it a community resource. I do enjoy your newsletters and content, thanks Colby🚀
no problem! thanks for your support 🫡 enjoy!
Commenting for the algorithm
You the homie 🫶
Seems to have worked haha
@@Rikearon 🚀
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
thank you! a lot of love went into building it. let me know what you think!
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.
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.
really appreciate the kind words 🙏
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.
appreciate that 🙏
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!
really appreciate the kind words 🙏
The way of explaining things are so clean. Much appreciate it.
no problem!
I am a backend developer and new to Next.js. This tutorial has inspired me to start learning Next.js
awesome, it's a great framework, hope it helps ease your way into the frontend
@@colbyfayock You are superb my friend. Such a brilliant tutorial. I learned so much. I really appreciate you Colby. Blessings to you bro.
I look forward for this kind of format! I'm really glad to see a real project-based video!
yeahhh! hope you enjoy it!
Definitrly, one of the better you tube channels for nextjs. Easy to follow and well explained
thanks 🙏
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
thanks for the kind words! glad it's been helpful for you 🙌
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.
glad you found it helpful!! ill keep that video idea in mind, thanks
RUclips 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
Thank you!! 🙌
Where to go next? 👀
- Data Pagination with Suspense: ruclips.net/video/RlzrXSVYPIw/видео.html
- Generate PDFs: ruclips.net/video/4V5HbqYJCVI/видео.html
- Realtime Notifications with Knock: ruclips.net/video/nS5flwLW7Fs/видео.html
I think this should be on descriptions
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!🔥
thank you 🙏
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!
no problem! lots of good stuff in there
Really well done tutorial...
@@VincentFulco thank you 🙏
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.
thank you 🙏
I learned a lot from this. No time wasted, straight-up valuable information. Thanks Subbed
thank you!
Man! I love you!! I've been wondering when you were going to share the full project. Thank you! 🙏🙏
🫡 lmk what you think!
Thank you for this great course Colby.
Loving every second of it! ❤
love to hear it!
IDK how i'm only now discovering your channel sir, thank you
🫡
perfect video ,we need more videos like this in next.js and react
thanks 🙏
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.
thanks! cool idea
I'm your old fan and I always loved your content.
thank you for your support 🙏
Awesome Project Colby!
Thank you!
was looking for something like this ..thanks man ..i will surely build this with you
no problem! let me know how you come out
This is goldeeeen!
thanks 🙌 you give a lot to aspire to with these kinds of courses 🫡
Great job and and thank you for the hard work on this resource.
thank you for your support 🙏
such gr8 content and such an excellent teacher. Best of the yr, thank you!
thank you 🙏
nice, i like the server and client side, i must also try nextjs, currently i always did react and all that.. :D
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 😉
oof thanks for the heads up 🙈
that's some quality content and very clearly explained concepts people should know more about this and this page....👌👌
Thank you!!
Very good video, the explanations are clear . Great job !!!!!
thank you!
Awesome job, Colby!
thanks Ryan 🙌
Awesome, many thanks!
You're welcome!
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?
definitely a good idea!
everything so clearly explained 😊
thank you!
High quality content
🙏
nice project thanks for sharing.
no problem, enjoy!
Amazing stuff, dude!
thanks Alex 🙏 appreciate your support
That’s amazing!!!!
😉
Hey Colby 👋🏾 love your tutorials, very calming and easy to follow. Now I have to ask what VSCode theme are you using?
thanks 😁 Night Owl! marketplace.visualstudio.com/items?itemName=sdras.night-owl
Great, I leave like and sub , I will start the project now.
Thanks for the support!
Xata is the best❤❤
💯
Great stuff Colby. Any idea of extending this to real time notifications?
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: ruclips.net/video/nS5flwLW7Fs/видео.html
oh it's a free course your awesome I'll enjoy going through it
would love to hear what you think as you work thruogh it!
@@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?
looks great!
thanks 🙌
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!
this is the course! thanks to Xata and Clerk I was able to publish it for free and make it available to all 🚀
@@colbyfayock Great! Thank you !!
this is quality!
thank you 🙌
Amazing 🔥🔥
thank you!
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.
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
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";
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
Thank you so much sir ❤
🫡
Great tutorial
thank you!
what's the vscode icon theme in explorer you used? it looks nice.
I didnt know my Icons weren't standard 👀 I use the Night Owl theme though vscodethemes.com/e/sdras.night-owl/night-owl
Commenting for the algorithm too
🫶 you da best
Thanks in advance ❤
🫡
I love you so much. Thank you :)
🫶 no problem!
Great Stuff !
Thanks!
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?
Awesome ❤
thanks 🙌
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?
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
@colbyfayock help!
Wow you are amazing
🙏
why error in this auth.protect():
export default clerkMiddleware((auth, request) => {
if(isProtected(request)) {
auth().protect()
}
});
do it like this -
export default clerkMiddleware(async (auth, req) => {
if (isProtectedRoute(req)) await auth.protect()
})
thanks for this
thank you 🙏
Amazing work! Maybe a video working with cursor AI
nice idea!
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
Colby!
🙌
epic 🎉
🫡
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 ?
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!
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)]);
```
oh nice one!
4:16:15 line 32 isError conditions contradicts each other : D
can i use any other payment system besides stripe?
what shortcut did you use for selecting and inserting mutliple line , time = 16:34
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
In my case it was required to use `config({ path: "./.env.local", override: true });` to make migration working
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?
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?
First of all I like this tutorial the best. The instructor make it very easy to follow and understand.
I'm totally new on react, Next.js. and almost everting use on this tutorial, but able to follow the tutorial without and difficulty. Great tutorial.
I follow the tutorial to the part where we add userId field to the table, then fix the action.ts file. (around 2.24 of the video : ruclips.net/video/Mcw8Mp8PYUE/видео.html)
I just can't continue from there, because in line 10 where the video said we don't need to await auth() to access the userId.
I just can't access it. Got an error complaining that userId is null when trying to insert the record. (I use not null on the schema)
I can get pass that point only with await auth(), otherwise the userId won't be available to use.
Did check the documentation on clerk, from what I understand, they said it doesn't need await too.
But I can use it only if I put await in front of auth().
Do not know why, but will move forward to the rest of the video for now.
Thank you very much for making this video tutorial.
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
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
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.
i have min-h-screen on the body
@@colbyfayock Oh I see, thanks
@@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?
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.
its not a trick... its a valid HTML input type and has been commonly used with forms for years and years and years
@@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.
uncaughtException: Error: Connection terminated unexpectedly
at Connection
I keep getting the above error after a while for some reason
I get @54:07:
"npm run generate
> invoicing-app@0.1.0 generate
> drizzle-kit generate
No config path provided, using default 'drizzle.config.ts'
Reading config file 'C:...\invoicing-app\drizzle.config.ts'
Please set your XATA_DATABASE_URL" Though my file looks just exactly like yours.
This is so strange. Copied the drizzle.config code from your github and now it works. Compared the code. It is xactly the same.
Awesome
🙌
my app is not connecting to the xata database
❤❤
🫶
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 ?
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
For one who not fluent in english you can try 0.75x
Why won't your code show errors I am facing when using server actions?
isn’t it funny that the theme that is “default” selected in shadcn is not in fact the “default” theme
👀
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
not totally sure but doubt it
❤
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?
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?
What in the Chatgpt is this GEM 💎?!
✨
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 :/
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
Why my dynamic route is not working like it gives me the invoice id NaN i debugged it same issue
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
@@colbyfayock DONE Sir
@@colbyfayock Error Solved
@@Armys2940 💯
nice
Thanks!
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?
sorry i didnt hit that error... not totally sure what it could be
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'
hey did you upgrade to the canary version of Next.js? should be in the video somewhere around there
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.
PHP Can does the same in almost 1/4 time and without all these external integrations 😀
you must be a 10x dev