Brett Westwood - Software Engineer
Brett Westwood - Software Engineer
  • 67
  • 616 567
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
มุมมอง: 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
How To Use Next.js 14 Server Actions
มุมมอง 26Kปีที่แล้ว
How To Use Next.js 14 Server Actions
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
Shadcn/ui - Game Changer UI Library
มุมมอง 7Kปีที่แล้ว
Shadcn/ui - Game Changer UI Library
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
Build a Stripe Checkout with Next.js 13
มุมมอง 24Kปีที่แล้ว
Build a Stripe Checkout with Next.js 13

ความคิดเห็น

  • @codestarrunner
    @codestarrunner 2 ชั่วโมงที่ผ่านมา

    I tried this in Next.js 15. It doesn't work.

  • @AbdullohOf-f8f
    @AbdullohOf-f8f 11 ชั่วโมงที่ผ่านมา

    source code pls

  • @mayankchandratre191
    @mayankchandratre191 2 วันที่ผ่านมา

    Helped a lot!

  • @n8xeditz561
    @n8xeditz561 4 วันที่ผ่านมา

    Bruh ny comment is getting removed by itself 😢

  • @n8xeditz561
    @n8xeditz561 4 วันที่ผ่านมา

    Can you plz make a video on that or just provide me docs to do that thing, it'll definitely be a sub forever

  • @sithijakavee9224
    @sithijakavee9224 5 วันที่ผ่านมา

    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?

  • @mr_hassanali
    @mr_hassanali 5 วันที่ผ่านมา

    Thanks

  • @Tofupoilu
    @Tofupoilu 5 วันที่ผ่านมา

    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?

  • @uptechuz
    @uptechuz 5 วันที่ผ่านมา

    Thank you very much for your tutorial. Very usefull 👍👍

  • @amoghchaubey4907
    @amoghchaubey4907 8 วันที่ผ่านมา

    Super helpful video, even after NodeMailer has replaced Email provider. Thank you so much!!

  • @nettemsarath3663
    @nettemsarath3663 9 วันที่ผ่านมา

    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

  • @josevelez6865
    @josevelez6865 10 วันที่ผ่านมา

    very helpful! thanks!

  • @thiagopadovani6654
    @thiagopadovani6654 14 วันที่ผ่านมา

    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?

    • @brettwestwooddeveloper
      @brettwestwooddeveloper 14 วันที่ผ่านมา

      yes what event are you trying to receive the metadata in?

  • @hamzazahidulislam3490
    @hamzazahidulislam3490 16 วันที่ผ่านมา

    Thanks

  • @philippeauguste1516
    @philippeauguste1516 17 วันที่ผ่านมา

    Thanks from France, a very good tutorial

  • @StudioSupermassiveLLC
    @StudioSupermassiveLLC 18 วันที่ผ่านมา

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

    • @brettwestwooddeveloper
      @brettwestwooddeveloper 18 วันที่ผ่านมา

      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

    • @StudioSupermassiveLLC
      @StudioSupermassiveLLC 18 วันที่ผ่านมา

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

    • @brettwestwooddeveloper
      @brettwestwooddeveloper 18 วันที่ผ่านมา

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

  • @yashwavare4609
    @yashwavare4609 18 วันที่ผ่านมา

    1:48:54 , you have refreshed the page to show name in the dashboard. How to do it without refreshing the page

  • @valkeallar7599
    @valkeallar7599 21 วันที่ผ่านมา

    server components are rendered first

  • @Sfeclicel
    @Sfeclicel 21 วันที่ผ่านมา

    How do you handle errors or server side validation?

    • @brettwestwooddeveloper
      @brettwestwooddeveloper 18 วันที่ผ่านมา

      You can use a package like ZSA which does server side validation. There are other ways as well

  • @VladyslavChapiuk-p4q
    @VladyslavChapiuk-p4q 24 วันที่ผ่านมา

    It is impossible to have rent for 800$. Other than that, nice video. Thank you!

  • @Mahbublearn
    @Mahbublearn 29 วันที่ผ่านมา

    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!

  • @cr_spirit3986
    @cr_spirit3986 หลายเดือนก่อน

    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 ❤️

  • @miraclehesed8959
    @miraclehesed8959 หลายเดือนก่อน

    what am I getting wrong? It;s not working for me it's throwing a 500() error

  • @arjunponnala3010
    @arjunponnala3010 หลายเดือนก่อน

    where did you find the stripe checkout prebuilt code. I'm having trouble on this part. Any help would be really appreciated!

  • @dioncodestu
    @dioncodestu หลายเดือนก่อน

    Straight to the point. Thanks for the tutorial, it was super helpful!

  • @phoney_the_Hypo
    @phoney_the_Hypo หลายเดือนก่อน

    Normally, I don't digest most of the tutorials. You've earned a spot on my list of favorites

  • @AshikSarkar-yu7jy
    @AshikSarkar-yu7jy หลายเดือนก่อน

    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

  • @josepholatilo927
    @josepholatilo927 หลายเดือนก่อน

    good tutorial. but the link to the github repo is not working.

    • @brettwestwooddeveloper
      @brettwestwooddeveloper หลายเดือนก่อน

      Thanks for the sub Joseph! I will check it out to see why its not working!

  • @misterbean6674
    @misterbean6674 หลายเดือนก่อน

    Prisma still doesnt work on edge? Basically which type of code works on edge? and how to understand that via docs?

    • @brettwestwooddeveloper
      @brettwestwooddeveloper หลายเดือนก่อน

      If you separate the configuration files correctly then you can still use Prisma.

    • @misterbean6674
      @misterbean6674 หลายเดือนก่อน

      @@brettwestwooddeveloper Separated my files. But i wish to ask that what things run on edge considering prisma and next auth?

  • @chefnabil171
    @chefnabil171 หลายเดือนก่อน

    Nice work Brett thank you so much

  • @jonathasquintao3739
    @jonathasquintao3739 หลายเดือนก่อน

    Thank you bro, you helped me a lot!!!!

  • @dev-akeel
    @dev-akeel หลายเดือนก่อน

    kakwas 💖

  • @adammo6661
    @adammo6661 หลายเดือนก่อน

    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

  • @furycorp
    @furycorp หลายเดือนก่อน

    shadcn cli is great for when you want to download code from random third parties on the internet and then immediately execute it.

    • @brettwestwooddeveloper
      @brettwestwooddeveloper หลายเดือนก่อน

      hahaha yea, but you can see the dependencies and review the json file quickly to make sure

  • @wesleycoder
    @wesleycoder หลายเดือนก่อน

    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 ` `.

    • @brettwestwooddeveloper
      @brettwestwooddeveloper หลายเดือนก่อน

      Thanks glad you enjoyed the video! And true /n probably is better over the contrary. I have to see how shadcn handles that

  • @DilukshanN7
    @DilukshanN7 หลายเดือนก่อน

    Bro is underrated

  • @aayushdangi9558
    @aayushdangi9558 หลายเดือนก่อน

    Thank you bro worked for me

  • @mohammadabdullahakbar3134
    @mohammadabdullahakbar3134 หลายเดือนก่อน

    superb🤩

  • @jonathankurtis
    @jonathankurtis หลายเดือนก่อน

    nice job figuring out how it works without any docs yet.

    • @brettwestwooddeveloper
      @brettwestwooddeveloper หลายเดือนก่อน

      Yes, but I have to give credit for others helping out as well

  • @diwanshuji947
    @diwanshuji947 2 หลายเดือนก่อน

    Amazing video

  • @Trust3D
    @Trust3D 2 หลายเดือนก่อน

    Epic 🎉

  • @PavanSibal
    @PavanSibal 2 หลายเดือนก่อน

    Nice tutorial Brett. Thanks. Can we further optimize by just pulling search based rows instead of filtering the whole table.

  • @marcelomatheus3959
    @marcelomatheus3959 2 หลายเดือนก่อน

    The best video of MERN in YT

  • @CalkyesWebDevelopment-h4v
    @CalkyesWebDevelopment-h4v 2 หลายเดือนก่อน

    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

  • @judoScott
    @judoScott 2 หลายเดือนก่อน

    Greate video! Thank you so much for sharing!

  • @artalfredbernales8848
    @artalfredbernales8848 2 หลายเดือนก่อน

    Can you create a tutorial on how to deploy mern app in Vercel

  • @FADIK1987
    @FADIK1987 2 หลายเดือนก่อน

    very great tutorial, I have a question about redirection on the localhost with CORS, for some reason it did not work for me

  •  2 หลายเดือนก่อน

    Great Tutorial man

  • @brendansullivan4872
    @brendansullivan4872 2 หลายเดือนก่อน

    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.

    • @brettwestwooddeveloper
      @brettwestwooddeveloper 2 หลายเดือนก่อน

      Curious, so you are saying somebody can hack a .env file?

    • @brendansullivan4872
      @brendansullivan4872 2 หลายเดือนก่อน

      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.

  • @webshipon1941
    @webshipon1941 2 หลายเดือนก่อน

    Joss sir 🔥🔥🥰🥰