- 67
- 616 567
Brett Westwood - Software Engineer
United States
เข้าร่วมเมื่อ 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
มุมมอง: 698
วีดีโอ
I Created My OWN Components with Shadcn CLI and You Can Too!
มุมมอง 4.3K2 หลายเดือนก่อน
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.3K4 หลายเดือนก่อน
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.6K6 หลายเดือนก่อน
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
มุมมอง 11K6 หลายเดือนก่อน
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.7K7 หลายเดือนก่อน
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
มุมมอง 15K9 หลายเดือนก่อน
Build a Form with Validation using Shadcn/ui - Step by Step
Create A Fully Functional Search Bar in Next.js 14 - Step by Step
มุมมอง 8K9 หลายเดือนก่อน
Create A Fully Functional Search Bar in Next.js 14 - Step by Step
How To Use The Email Provider - Auth.js
มุมมอง 4.5K10 หลายเดือนก่อน
How To Use The Email Provider - Auth.js
How To Use MongoDB Triggers - Super Easy
มุมมอง 2.3K11 หลายเดือนก่อน
How To Use MongoDB Triggers - Super Easy
The Ultimate Guide To Next.js Route Handlers - CRUD
มุมมอง 6Kปีที่แล้ว
The Ultimate Guide To Next.js Route Handlers - CRUD
Create A Simple Booking Component - Full Stack
มุมมอง 3.5Kปีที่แล้ว
Create A Simple Booking Component - Full Stack
Send Emails with Next.js 13 - The Best & Easiest Way
มุมมอง 23Kปีที่แล้ว
Send Emails with Next.js 13 - The Best & Easiest Way
Next Auth - JWT & Session Callback & How to Update User Session
มุมมอง 50Kปีที่แล้ว
Next Auth - JWT & Session Callback & How to Update User Session
Next Auth Credentials Provider - Ultimate Guide
มุมมอง 52Kปีที่แล้ว
Next Auth Credentials Provider - Ultimate Guide
5 Tailwindcss Tips & Tricks You Should Know
มุมมอง 1.4Kปีที่แล้ว
5 Tailwindcss Tips & Tricks You Should Know
Connect Google Provider to Database - Next Auth
มุมมอง 13Kปีที่แล้ว
Connect Google Provider to Database - Next Auth
Next.js 13 Crash Course | App Directory, Route Handlers, Server Components & More
มุมมอง 10Kปีที่แล้ว
Next.js 13 Crash Course | App Directory, Route Handlers, Server Components & More
Build A Functional Search Bar with Next.js (SearchParams)
มุมมอง 20Kปีที่แล้ว
Build A Functional Search Bar with Next.js (SearchParams)
Next.js 13 Data Fetching - The Ultimate Guide
มุมมอง 40Kปีที่แล้ว
Next.js 13 Data Fetching - The Ultimate Guide
The Ultimate Beginners Guide to Building a Chatbot with OpenAI API - Chat GPT
มุมมอง 470ปีที่แล้ว
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.5Kปีที่แล้ว
Build A Fully Responsive Website Section with TailwindCSS and NextJS 13
How to Use NextJS 13 Link and useRouter Like a Pro
มุมมอง 10Kปีที่แล้ว
How to Use NextJS 13 Link and useRouter Like a Pro
Next Auth Google Provider - Tutorial - NextJS 13
มุมมอง 11Kปีที่แล้ว
Next Auth Google Provider - Tutorial - NextJS 13
The Ultimate Guide to Next Auth - Everything You Need
มุมมอง 59Kปีที่แล้ว
The Ultimate Guide to Next Auth - Everything You Need
How To Easily Upload Folders/Files/Projects on GitHub - QuickStart Guide Repositories
มุมมอง 424ปีที่แล้ว
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.6Kปีที่แล้ว
Build a NextJS Fully Functional Register Page with API Endpoint, MongoDB & Prisma
I tried this in Next.js 15. It doesn't work.
source code pls
Helped a lot!
Bruh ny comment is getting removed by itself 😢
Can you plz make a video on that or just provide me docs to do that thing, it'll definitely be a sub forever
28:29 here on every request update query will run right? whether its a new name or not. so is it ok to query the db like that?
Thanks
Try to imlement email provider on prod with vercel but i have to login twice. On localhost no problem. Have you got this problem too?
Thank you very much for your tutorial. Very usefull 👍👍
Super helpful video, even after NodeMailer has replaced Email provider. Thank you so much!!
hi Brett, how can we manage state management in nextjs. i got into a situation my parent server component has 2 child client components, the child components has to share the data like applying filters in child 1 should reflect in child2 how can i acheive it
very helpful! thanks!
Firstly congrats for the content, man! I'm getting the same issue where the metadata is coming empty in the event although I make sure I'm passing a value to it and it seems to be random. Do you know a reason for that or another way to pass custom data to the event?
yes what event are you trying to receive the metadata in?
Thanks
No problem!!
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!