- Видео 67
- Просмотров 606 675
Brett Westwood - Software Engineer
США
Добавлен 23 сен 2020
Form Components in Next.js 15 Are About to Get a Whole Lot Better!
Next.js 15 has just released its stable version that is ready for production.
The new Form Component has made the developer experience easier when it comes to search forms that leads to a search result page.
In this video, I go over the syntax on how to use the searchParams and the new Form component from Next.js 15.
Check out Next.js 15's breaking changes here 👇
nextjs.org/blog/next-15
Code for example used in video 👇
github.com/bwestwood11/nextjs-15-form
Join my Discord room to interact with other developers 👇
discord.gg/jThDV4nnwS
The new Form Component has made the developer experience easier when it comes to search forms that leads to a search result page.
In this video, I go over the syntax on how to use the searchParams and the new Form component from Next.js 15.
Check out Next.js 15's breaking changes here 👇
nextjs.org/blog/next-15
Code for example used in video 👇
github.com/bwestwood11/nextjs-15-form
Join my Discord room to interact with other developers 👇
discord.gg/jThDV4nnwS
Просмотров: 441
Видео
I Created My OWN Components with Shadcn CLI and You Can Too!
Просмотров 3,7 тыс.Месяц назад
Shadcn just updated their CLI with a lot of ground breaking new changes. The biggest change is being able to install remote components using just a URL. You can create a json file and make it publicly accessible allowing you to use the Shadcn CLI to work with your remote URL that is pointed toward that json file. In this video, I will show you how to create your own component/block and configur...
The BEST Way To Create Server Actions - Next.js
Просмотров 1,2 тыс.4 месяца назад
zsa is a library that allows for developers to create typesafe server actions inside a Next.js application. zsa actually stands for Zod Server Actions and utilizes zod for creating type safety within your code. We will go over how to create server actions with the zsa library, how to create procedures (aka middleware) and much more. Timestamps 0:00 Intro 0:32 What is zsa (Zod Server Actions)? 1...
I Built A Startup in 1 Month (SaaS)
Просмотров 1,6 тыс.6 месяцев назад
ChatBuild.io is the startup I built which is an AI chatbot builder that can be trained on your own data points and then integrated onto your website. In this video, I go over what I built, why I built it, how I built in, marketing techniques for SaaS/startup businesses and how many customers I currently have. I used Next.js to code the startup, along with other technologies that aide in the dev...
Stripe Webhooks - The Ultimate Guide
Просмотров 10 тыс.6 месяцев назад
In this video, I go step by step on how you can use Stripe webhooks in a React.js/Next.js application. Stripe webhooks listen to events in your Stripe account and allow you to trigger functions when a specific event is triggered. You can test out the Stripe webhook in your development server with the Stripe CLI. After watching this video, you should be able to successfully setup Stripe webhooks...
How To Send A Verification Email using Next-Auth - Step by Step (Detailed)
Просмотров 3,5 тыс.6 месяцев назад
GitHub Repo Link 👇 github.com/bwestwood11/verification-email-token-authjs Join our Discord server to interact with other developers 👇 discord.gg/rKXNDnE32N In this video, I teach you how to create a verification token so you can send it to the user after they register for an account. This will allow them to verify their email by clicking the link we send them which in turn will allow them to lo...
Build a Form with Validation using Shadcn/ui - Step by Step
Просмотров 14 тыс.8 месяцев назад
Build a Form with Validation using Shadcn/ui - Step by Step
Create A Fully Functional Search Bar in Next.js 14 - Step by Step
Просмотров 8 тыс.8 месяцев назад
Create A Fully Functional Search Bar in Next.js 14 - Step by Step
How To Use The Email Provider - Auth.js
Просмотров 4,4 тыс.10 месяцев назад
How To Use The Email Provider - Auth.js
How To Use MongoDB Triggers - Super Easy
Просмотров 2,2 тыс.11 месяцев назад
How To Use MongoDB Triggers - Super Easy
The Ultimate Guide To Next.js Route Handlers - CRUD
Просмотров 6 тыс.Год назад
The Ultimate Guide To Next.js Route Handlers - CRUD
Create A Simple Booking Component - Full Stack
Просмотров 3,5 тыс.Год назад
Create A Simple Booking Component - Full Stack
Send Emails with Next.js 13 - The Best & Easiest Way
Просмотров 23 тыс.Год назад
Send Emails with Next.js 13 - The Best & Easiest Way
Next Auth - JWT & Session Callback & How to Update User Session
Просмотров 49 тыс.Год назад
Next Auth - JWT & Session Callback & How to Update User Session
Next Auth Credentials Provider - Ultimate Guide
Просмотров 52 тыс.Год назад
Next Auth Credentials Provider - Ultimate Guide
5 Tailwindcss Tips & Tricks You Should Know
Просмотров 1,3 тыс.Год назад
5 Tailwindcss Tips & Tricks You Should Know
Connect Google Provider to Database - Next Auth
Просмотров 13 тыс.Год назад
Connect Google Provider to Database - Next Auth
Next.js 13 Crash Course | App Directory, Route Handlers, Server Components & More
Просмотров 10 тыс.Год назад
Next.js 13 Crash Course | App Directory, Route Handlers, Server Components & More
Build A Functional Search Bar with Next.js (SearchParams)
Просмотров 20 тыс.Год назад
Build A Functional Search Bar with Next.js (SearchParams)
Next.js 13 Data Fetching - The Ultimate Guide
Просмотров 40 тыс.Год назад
Next.js 13 Data Fetching - The Ultimate Guide
The Ultimate Beginners Guide to Building a Chatbot with OpenAI API - Chat GPT
Просмотров 467Год назад
The Ultimate Beginners Guide to Building a Chatbot with OpenAI API - Chat GPT
Build A Fully Responsive Website Section with TailwindCSS and NextJS 13
Просмотров 3,4 тыс.Год назад
Build A Fully Responsive Website Section with TailwindCSS and NextJS 13
How to Use NextJS 13 Link and useRouter Like a Pro
Просмотров 10 тыс.Год назад
How to Use NextJS 13 Link and useRouter Like a Pro
Next Auth Google Provider - Tutorial - NextJS 13
Просмотров 10 тыс.Год назад
Next Auth Google Provider - Tutorial - NextJS 13
The Ultimate Guide to Next Auth - Everything You Need
Просмотров 58 тыс.Год назад
The Ultimate Guide to Next Auth - Everything You Need
How To Easily Upload Folders/Files/Projects on GitHub - QuickStart Guide Repositories
Просмотров 395Год назад
How To Easily Upload Folders/Files/Projects on GitHub - QuickStart Guide Repositories
Build a NextJS Fully Functional Register Page with API Endpoint, MongoDB & Prisma
Просмотров 4,6 тыс.Год назад
Build a NextJS Fully Functional Register Page with API Endpoint, MongoDB & Prisma
Build a Stripe Checkout with Next.js 13
Просмотров 23 тыс.Год назад
Build a Stripe Checkout with Next.js 13
Thanks from France, a very good tutorial
I am using the payment intent and have the stockify app installed in my dashboard. When I submit a successful transaction the stock number does not update? Ideas.. I was told I needed to setup a webhook??
Yes you need to set up a webhook to get information after a payment intent is triggered. You will have to listen to the payment intent event associated with what you are doing. You can send metadata through to your webhook as well
@@brettwestwooddeveloper I have setup the webhook already and working but not sure how to update the stock inventory for the stockify app? I have used the metadata. but would love to have the stockify app show the new inventory count?
@@StudioSupermassiveLLC assuming it updates in your database after the webhook runs. Just run the logic of updating the stock inventory in the webhook file where the event is.
1:48:54 , you have refreshed the page to show name in the dashboard. How to do it without refreshing the page
server components are rendered first
How do you handle errors or server side validation?
You can use a package like ZSA which does server side validation. There are other ways as well
It is impossible to have rent for 800$. Other than that, nice video. Thank you!
Its definitely possible
Wow, your Video is amazing! 🎥 If you're looking to boost your reach and connect with more viewers, *I’d love to help you improve your video SEO.* Let’s connect and unlock the full potential of your content!
Unsure if you even remember me, but your video where you taught how to implement authentication with firebase is what led to me having an entire god damn start up company, with a team, a product under development with a huge demand… So just thank you my guy ❤️
what am I getting wrong? It;s not working for me it's throwing a 500() error
where did you find the stripe checkout prebuilt code. I'm having trouble on this part. Any help would be really appreciated!
Straight to the point. Thanks for the tutorial, it was super helpful!
No problem Dion! Thanks for the support!
Normally, I don't digest most of the tutorials. You've earned a spot on my list of favorites
Awesome! I feel honored!
It would take you 15 minutes to build this form with default html elements with react-hook-form. You just made this unneccessarily long and complicated lol
I guess so
good tutorial. but the link to the github repo is not working.
Thanks for the sub Joseph! I will check it out to see why its not working!
Prisma still doesnt work on edge? Basically which type of code works on edge? and how to understand that via docs?
If you separate the configuration files correctly then you can still use Prisma.
@@brettwestwooddeveloper Separated my files. But i wish to ask that what things run on edge considering prisma and next auth?
Nice work Brett thank you so much
No problem! Thanks for the support!
Thank you bro, you helped me a lot!!!!
Glad I could help!
kakwas 💖
Maaaan this literally saved my life. I was struggling to get both credentials with next auth working, but it does now. THANK YOU SOOOO MUCH
shadcn cli is great for when you want to download code from random third parties on the internet and then immediately execute it.
hahaha yea, but you can see the dependencies and review the json file quickly to make sure
Awesome! I was planning on diving into shadcn's repo and figuring out how to do exactly this and your video appeared for me. This will save a lot of time. Also I don't know how shadcn handles it yet but I would recommend not using ` ` for line breaks as it screws with Mac and linux users if possible stick to only ` `.
Thanks glad you enjoyed the video! And true /n probably is better over the contrary. I have to see how shadcn handles that
Bro is underrated
Thank you!
Thank you bro worked for me
Awesome! Glad it did
superb🤩
Thank you Mohammad!
nice job figuring out how it works without any docs yet.
Yes, but I have to give credit for others helping out as well
Amazing video
Thank you!
Epic 🎉
Thank you!
Nice tutorial Brett. Thanks. Can we further optimize by just pulling search based rows instead of filtering the whole table.
The best video of MERN in YT
Thank you Marcelo!
for the sake of the tutorial I used mongoose instead of mongodb, I normally use mongodb but just so that I can follow along i'll use mongoose
Greate video! Thank you so much for sharing!
Thanks for watching!
Can you create a tutorial on how to deploy mern app in Vercel
very great tutorial, I have a question about redirection on the localhost with CORS, for some reason it did not work for me
Great Tutorial man
Appreciate it! Glad you liked it!
If you put those in a .env file a nice way to get hacked is to look in your build folder an retrieve it from inspect menu.
Curious, so you are saying somebody can hack a .env file?
It blew my mind when I saw it but while at work what happened was a friend of mine goes into the build (sources I believe) and you can see the values directly in there because it gets injected when you build. The good news is the config file for firebase with the api key measurement etc is meant to be public facing. Not very usable for the hacker since you set the rules on the backend for Firestore and the real-time db etc. what you want to add though is app check. That buries any hacker trying to pull some shit because you can put recaptcha v3 where it’s automatic. When you do this you can choose any firebase add on to be enforced with it and they are blocked.
Joss sir 🔥🔥🥰🥰
Thank you!
Thanks a lot! I was struggling to find the correct solution. Your video helped a lot. 👍👍
No problem, glad you stumbled upon my video!
Thank you for the great tutorial! keep up the good work buddy!
Thank you! Will do!
bro i need help how do i add logout to this and also the frontend css for the pages??
I will be adding a new tutorial going over a full authentication process using the MERN stack.
Definitely best tutorial I’ve seen for forms with shadcn, RHF and Zod. Curious if there’s a reason you validate passwords matching on the backend versus validating this on the client side? I’m just a hobby developer starting to learn about backend. Would it not be quicker to validate this as they’re filling out the form vs sending data to the backend and then waiting for an error response?
Hi thanks for the kind words! Best practice is to check if passwords match on both the client and server side. I am pretty sure you can use React Hook Forms for client side validation. Also, you should check it in backend before sending to your database.
can you add protecting dashboard route in this tutorial THE REST OF IT WAS ABSOLUTELY SPOT ON The only thing you missed was protecting route..im facing some problems there
Yes, I will add protected routes in a new video. I am planning on creating another video going over next auth version 5
GREEAAAT TUTORIAL!!
Thank you! Glad you liked it!
thanks a lot dude.
You're welcome!
bro content was good , few issue i cant see the code , 2nd when u copy paste the code its really hard for a beginner to understand things
Thank you and yes I will try to make the code more readable and try not to copy and paste.
Hey this looks very nice! I have a question about how do you embed the chat widget onto the customer's website? Is it with web components?
Thank you! And no, currently there is two ways to embed a chat widget on any website. One is to use a script tag that we provide so we can inject the chatbot's JavaScript and CSS into the website. Secondly, we have created a npm package mainly for Next.js websites and developers.
@@brettwestwooddeveloper Got it, thanks for the reply. I'm trying to figure out how this injection works from a technical standpoint. If you build it using React (maybe with Next.js or CRA), how do you then extract it to a snippet that can be embedded by users with script tag? I heard this can be done using something called web components but you are not using them in this case?
nice video
Thank you!
thank you sir think you
You are welcome!
This is what I was looking for, very well explained, thanks! Also, do you think you can build an app entirely with server actions and ditch apis?
Thanks for the kind words! Yes, you can build an entire app with just server actions for sure. However, some apps that are more complex may need API endpoints.
Bro you look like AI generated 🎉
Thanks I guess!
@@brettwestwooddeveloper everything is perfect in your face 🙃
thx
No problem!