Coding Jitsu
Coding Jitsu
  • 67
  • 71 477
Next.js Email Widget Refactor: Loading State & Custom Validation with Zod Explained
Welcome to Coding Jitsu Channel! 🎉
In this video, I’m refactoring the email collection widget I built in my previous tutorial on creating a full-stack blog app with Next.js, MDX, and a PostgreSQL database. 🚀
In this refactor, I’ll tackle two key issues:
1️⃣ Add a loading state with useFormStatus hook to prevent spam submissions and improve user experience.
2️⃣ Implement custom email validation using Zod to ensure only valid emails are stored in the database.
By the end of this video, you’ll learn how to make your forms more secure and production-ready!
📺 Previous Tutorial (Full-Stack Blog App): ua-cam.com/video/htgktwXYw6g/v-deo.html
🔗 Code Repository: github.com/w3tsadev/next-blog
📝 Helpful Links:
- Zod Documentation: zod.dev/
- Next.js Server Actions Guide: nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
💬 Let’s Connect:
Have questions or ideas for the next tutorial? Drop them in the comments below! 👇
👍 Don’t forget to like, subscribe, and turn on notifications for more hands-on coding tutorials! Happy coding! 👨‍💻✨
#Zod #typescript #nextjs #coding
Reach out to me:
Twitter: w3tsadev
🎥 Other Videos to Watch:
Comprehensive Next.js Full Tutorial - ua-cam.com/play/PLI2MfgGPNO71XkjxnkLxLRDHMVBWkG5M3.html
Переглядів: 11

Відео

Building Next.js Ecommerce Store with TypeScript, Tailwindcss, headlessui, and Shopify CMS.
Переглядів 4,8 тис.Місяць тому
🎉 Welcome to the comprehensive Ecommerce store Project! 🚀 In this comprehensive tutorial, you'll learn how to build a high-performance, server-rendered Next.js App Router ecommerce application using Shopify as a headless CMS! . This template uses React Server Components, Server Actions, Suspense, useOptimistic, and more. I'll guide you step by step through the process of setting up your storefr...
Building Next.js Fullstack Blog with TypeScript, Shadcn/ui, MDX, Prisma and Vercel Postgres.
Переглядів 18 тис.4 місяці тому
🎉 Welcome to my comprehensive MDX Blog Site Project! 🚀 In this video, I’ll walk you through my feature-rich blog site that’s built to offer an exceptional experience for both bloggers and readers. Here’s what you can expect: 📝 Key Features: - MDX and Markdown Support: Enjoy the flexibility of writing your blog posts in MDX and Markdown, combining the best of both worlds with easy formatting and...
Mastering Next.js 14: Adding Metadata | Part Sixteen #nextjs14
Переглядів 4146 місяців тому
In this chapter Here are the topics we’ll cover: ℹ What metadata is. 📦 Types of metadata. 🌁 How to add an Open Graph image using metadata. ⚛ How to add a favicon using metadata. Part One: ua-cam.com/video/V3oueSSuG0A/v-deo.html Part Two: ua-cam.com/video/jNO9HiiXyJM/v-deo.html Part Three: ua-cam.com/video/Aw7rvumF4wI/v-deo.html Part Four: ua-cam.com/video/8nber0ktwN4/v-deo.html Part Five: ua-ca...
Mastering Next.js 14: Adding Authentication | Part Fifteen #nextjs14
Переглядів 4806 місяців тому
In this chapter Here are the topics we’ll cover: ✓ What is authentication. ䷗ How to add authentication to your app using NextAuth.js. 🎯 How to use Middleware to redirect users and protect your routes. ⚛ How to use React's useFormStatus and useFormState to handle pending states and form errors. Part One: ua-cam.com/video/V3oueSSuG0A/v-deo.html Part Two: ua-cam.com/video/jNO9HiiXyJM/v-deo.html Pa...
Mastering Next.js 14: Form validation with Zod & useFormState | Part Fourteen #nextjs14
Переглядів 2 тис.6 місяців тому
In this chapter Here are the topics we’ll cover: 📄 How to implement server-side form validation. ⚛ How to use the React useFormState hook to handle form errors, and display them to the user. Part One: ua-cam.com/video/V3oueSSuG0A/v-deo.html Part Two: ua-cam.com/video/jNO9HiiXyJM/v-deo.html Part Three: ua-cam.com/video/Aw7rvumF4wI/v-deo.html Part Four: ua-cam.com/video/8nber0ktwN4/v-deo.html Par...
Mastering Next.js 14: Handling Error | Part Thirteen
Переглядів 5927 місяців тому
Mastering Next.js 14: Handling Error | Part Thirteen
Mastering Next.js 14: Mutating Data with Server Actions | Part Twelve
Переглядів 2257 місяців тому
Mastering Next.js 14: Mutating Data with Server Actions | Part Twelve
Mastering Next.js 14: Mutating Data with Server Actions | Part Eleven
Переглядів 2397 місяців тому
Mastering Next.js 14: Mutating Data with Server Actions | Part Eleven
Mastering Next.js 14: Mutating Data with Server Actions | Part Ten
Переглядів 4537 місяців тому
Mastering Next.js 14: Mutating Data with Server Actions | Part Ten
Mastering Next.js 14: Adding Search and Pagination | Part Nine
Переглядів 2,9 тис.8 місяців тому
Mastering Next.js 14: Adding Search and Pagination | Part Nine
Mastering Next.js 14: Static and Dynamic Rendering with Streaming | Part Eight
Переглядів 3838 місяців тому
Mastering Next.js 14: Static and Dynamic Rendering with Streaming | Part Eight
Mastering Next.js 14: Fetching Data| Part Seven
Переглядів 4868 місяців тому
Mastering Next.js 14: Fetching Data| Part Seven
Mastering Next.js 14: Setting Up Your Database | Part Six
Переглядів 9348 місяців тому
Mastering Next.js 14: Setting Up Your Database | Part Six
Mastering Next.js 14: Navigating Between Pages | Part Five
Переглядів 4718 місяців тому
Mastering Next.js 14: Navigating Between Pages | Part Five
Mastering Next.js 14: Creating Layouts and Pages | Part Four
Переглядів 7538 місяців тому
Mastering Next.js 14: Creating Layouts and Pages | Part Four
Mastering Next.js 14: Optimizing Fonts and Images | Part Three
Переглядів 8308 місяців тому
Mastering Next.js 14: Optimizing Fonts and Images | Part Three
Mastering Next.js 14: CSS Styling | Part Two
Переглядів 5608 місяців тому
Mastering Next.js 14: CSS Styling | Part Two
Mastering Next.js 14: From Basics to Advanced Techniques | Part One
Переглядів 1,6 тис.8 місяців тому
Mastering Next.js 14: From Basics to Advanced Techniques | Part One
ASMR Programming | Beautiful Text scroll and hover effect with GSAP and clip-path | No Talking
Переглядів 458Рік тому
ASMR Programming | Beautiful Text scroll and hover effect with GSAP and clip-path | No Talking
Node & Express Application Starter Template with TypeScript | Tutorial
Переглядів 2,3 тис.Рік тому
Node & Express Application Starter Template with TypeScript | Tutorial
Intro to TypeScript for New Programmers | TypeScript with React Tutorial #typescript #reactjs
Переглядів 945Рік тому
Intro to TypeScript for New Programmers | TypeScript with React Tutorial #typescript #reactjs
ASMR Programming | Beautiful Text Scroll Effect with Gsap and Lenis | No Talking
Переглядів 160Рік тому
ASMR Programming | Beautiful Text Scroll Effect with Gsap and Lenis | No Talking
ASMR Programming | Expanding Flex Card in HTML, CSS, and JavaScript No Talking
Переглядів 201Рік тому
ASMR Programming | Expanding Flex Card in HTML, CSS, and JavaScript No Talking
ASMR Programming | Typewriter Text Effect with Only CSS No Talking #asmr
Переглядів 78Рік тому
ASMR Programming | Typewriter Text Effect with Only CSS No Talking #asmr
Avoid These Common React.js Beginner Mistakes!
Переглядів 56Рік тому
Avoid These Common React.js Beginner Mistakes!
VSCode Keyboard Shortcuts that will Boost your Productivity 150%
Переглядів 127Рік тому
VSCode Keyboard Shortcuts that will Boost your Productivity 150%
Command Line Crash Course For Beginners | Terminal Commands
Переглядів 60Рік тому
Command Line Crash Course For Beginners | Terminal Commands
Building a beautiful Kanban board with Node JS, React, and Websockets #nodejs #reactjs #websocket
Переглядів 8 тис.Рік тому
Building a beautiful Kanban board with Node JS, React, and Websockets #nodejs #reactjs #websocket
React Router Dom Version 6 Crash Course | 2022 #reactJS #reactrouterdom #v6
Переглядів 4542 роки тому
React Router Dom Version 6 Crash Course | 2022 #reactJS #reactrouterdom #v6

КОМЕНТАРІ

  • @prashlovessamosa
    @prashlovessamosa 10 годин тому

    Can you please teach us Router v7 as a framework approach.

    • @codingjitsu
      @codingjitsu 8 годин тому

      Hey, I never worked with remix(Router v7), but I will definitely look into it. Do you want a beginner friendly foundational video?

    • @prashlovessamosa
      @prashlovessamosa 8 годин тому

      @codingjitsu great 👍

  • @lovesapphireschannel
    @lovesapphireschannel 10 годин тому

    Congratulations for finishing your project! I really love it!!!!!

  • @itsdio8390
    @itsdio8390 3 дні тому

    thanks for the content. definitely will try to build this one. but the keyboard sound is annoyingly loud.

  • @cristiancoppari
    @cristiancoppari 4 дні тому

    Best tutorial about Shopify and Next.js in UA-cam so far 👏🏻

    • @codingjitsu
      @codingjitsu 3 дні тому

      thanks!

    • @cristiancoppari
      @cristiancoppari 3 дні тому

      ​@@codingjitsu Is there any particular reason to not to use the shopifyClient like the docs say?

    • @codingjitsu
      @codingjitsu 3 дні тому

      @@cristiancoppari Not familiar with the shopifyClient, can you share the resource?

  • @JackyFan-k9y
    @JackyFan-k9y 8 днів тому

    Great Job! Thanks!

  • @howuseehim
    @howuseehim 9 днів тому

    Do it for woocommerce 🙏

  • @torres7707
    @torres7707 10 днів тому

    I like this tutorial very much, btw, what is this extension to give the tip that your function is not defined ( in 4:01:15)

    • @codingjitsu
      @codingjitsu 9 днів тому

      marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja

  • @ozturkersen
    @ozturkersen 11 днів тому

    I've been looking for a video like this for a while. It is awesome. please keep go on

  • @jitenderpondicherry5509
    @jitenderpondicherry5509 13 днів тому

    I have been getting 500 error "Error: {"cause":"TypeError: Invalid URL","status":500,"message":"Failed to parse URL from /api/2024-07/graphql.json",

    • @codingjitsu
      @codingjitsu 11 днів тому

      Your URL is missing the Shopify Domain.

  • @junglechungle
    @junglechungle 16 днів тому

    Awesome video! Will be using this to help build my next project. Thank you

  • @NewChannel-hs2fw
    @NewChannel-hs2fw 21 день тому

    bro im facing this error did you know how to solve it? Application error: a server-side exception has occurred (see the server logs for more information). Digest: 714012848

  • @miteshbhagwant4615
    @miteshbhagwant4615 22 дні тому

    Hey, amazing tutorial! However, I'm unable to see new products in 'All Products' after adding them, and changes made to existing products aren’t reflecting. Could you help with this?

    • @codingjitsu
      @codingjitsu 20 днів тому

      Check your webhooks and make sure to change the "Sort By" to "Latest arrivals" after adding new products.

    • @miteshbhagwant4615
      @miteshbhagwant4615 20 днів тому

      Figure out how to implement revalidation in getProduct and getCollection to enable ISR (Incremental Static Regeneration) , thanks.

  • @scorpion32
    @scorpion32 Місяць тому

    I've been a shopify developer for a while and this project just blows anything I've done . Congrats 👏

  • @donnervetter
    @donnervetter Місяць тому

    One thing I find fascinating about this tutorial is that you seemingly just keep on writing code without checking if it actually works? Or do you see that it works in another screen? I mean I could never write code like that, I'd check for feedback with console.log or something every step.

    • @codingjitsu
      @codingjitsu Місяць тому

      That's a great question! It's true that in edited tutorials, it might seem like the code flows seamlessly without any hiccups. However, in reality, there's a lot of trial and error involved, just like in any real-world coding project

  • @ahmedabdelmeguid1131
    @ahmedabdelmeguid1131 Місяць тому

    Perfect video

  • @cescfabregas0004
    @cescfabregas0004 Місяць тому

    is this free using shopify?

    • @codingjitsu
      @codingjitsu Місяць тому

      yes.

    • @ganieldago
      @ganieldago Місяць тому

      How it is free?

    • @codingjitsu
      @codingjitsu Місяць тому

      @@ganieldago you can use shopify partner program to build and test website, no CC needed, also the code here is open sourced and free.

  • @prashlovessamosa
    @prashlovessamosa Місяць тому

    hey I have compeleted most of the part I have learnt graphql from net ninja thanks for making this very helpful as you said when we expect the second part.

    • @codingjitsu
      @codingjitsu Місяць тому

      That's fantastic to hear! I'm glad the Net Ninja's GraphQL course has been helpful. Regarding a potential Part II, I'm still considering it. However, I also believe that the true power of learning comes from hands-on experience and experimentation. I encourage you to add your own functionalities and share your projects. I'm excited to see what you'll create with this knowledge!

    • @prashlovessamosa
      @prashlovessamosa Місяць тому

      @@codingjitsu got it thanks for replying I am still rookie I just try to learn the process of people building apps try to implement in my projects. Please keep bringing good stuff. Thank you

  • @kenchadwick4875
    @kenchadwick4875 Місяць тому

    Just what I was looking for. Thank you 👑

  • @KnowledgeDBman
    @KnowledgeDBman Місяць тому

    Welcome Back Bro ! i've never used Shopify before but looks interesting

  • @Amin-uo5un
    @Amin-uo5un Місяць тому

    Thanks subscribed

  • @corpsedad7368
    @corpsedad7368 Місяць тому

    Hey bro. Is it possible to add mdx in some database and change it by cms

    • @codingjitsu
      @codingjitsu Місяць тому

      Yes, Database-Based Approach: Store MDX as Text: Save the MDX content as plain text within a database field (e.g., a TEXT or LONGTEXT column in MySQL or PostgreSQL). CMS Integration: Use a CMS with database connectivity to create, edit, and manage MDX content directly within the CMS interface.

    • @corpsedad7368
      @corpsedad7368 Місяць тому

      ​@@codingjitsu would that be feasible compared to remote mdx content file fron github . I looked at this too. But i dont know what should i use

    • @codingjitsu
      @codingjitsu Місяць тому

      @@corpsedad7368 They both have their benefits. It's up to you what you want to use.

  • @codewithtakashi
    @codewithtakashi Місяць тому

    Hey can you tell me what font you using on vscode ? btw the video helped me thank you 💖

  • @codingchewie
    @codingchewie Місяць тому

    Think it would be nice to integrate the customer Shopify account access in the frontend with the customer API.

    • @codingjitsu
      @codingjitsu Місяць тому

      That would be in Part II

    • @prashlovessamosa
      @prashlovessamosa Місяць тому

      When we can expect the second part​@@codingjitsu

  • @CarlosTello-m8h
    @CarlosTello-m8h Місяць тому

    nice UI

  • @prashlovessamosa
    @prashlovessamosa Місяць тому

    whats prerquisite for this I dont know graphql do I have to learn graphql first

    • @codingjitsu
      @codingjitsu Місяць тому

      Having a basic understanding of GraphQL would definitely help, but you can use these queries as template and go from there.

    • @prashlovessamosa
      @prashlovessamosa Місяць тому

      @@codingjitsu got it thanks

  • @koolam5158
    @koolam5158 Місяць тому

    I thought u say dotenv😂

  • @prashlovessamosa
    @prashlovessamosa Місяць тому

    Thanks.

  • @sssrikanthhh
    @sssrikanthhh Місяць тому

    Thanks and love you so much bro❤ 🤗🫂

  • @KunalJadhav-pq2tx
    @KunalJadhav-pq2tx 2 місяці тому

    hi bro your content is super i want to connect with you for collebration

  • @SanthoshBhoopal
    @SanthoshBhoopal 2 місяці тому

    definitely more project videos

    • @codingjitsu
      @codingjitsu Місяць тому

      Thanks for your patience, new video is dropping at midnight EST

  • @prashlovessamosa
    @prashlovessamosa 2 місяці тому

    2 months 😢 nothing uploaded

    • @codingjitsu
      @codingjitsu Місяць тому

      Thanks for your patience, new video is dropping at midnight EST.

  • @tanny3080
    @tanny3080 2 місяці тому

    We currently store Markdown files in the 'contents' folder. However, if we're publishing new articles daily, this folder may become unwieldy over time. While this approach works well for infrequently updated documentation, is it suitable for frequent content creation? Should we instead consider implementing a content management system (CMS) like Sanity for more efficient handling of regularly published articles?

    • @codingjitsu
      @codingjitsu Місяць тому

      CMS is definitely a valid alternative.

  • @Aisha2254
    @Aisha2254 2 місяці тому

    I'm currently working on the app and wanted to ask a few questions about adding some dynamic features. Specifically, I’m interested in implementing the following: 1. **Comments**: I'd like to add a feature where users can leave comments. Could you guide me on the best way to approach this from both the front-end and back-end? 2. **Users**: I want to include user authentication and profiles. What are the best practices for managing user registration, login, and profile data securely? 3. **User Dashboard**: I would also like to create a user dashboard where users can see their information and possibly interact with their own data. What technologies or frameworks would you recommend for this feature? I’d appreciate any guidance or resources you can provide to help me add these dynamic features .

    • @codingjitsu
      @codingjitsu Місяць тому

      Definitely idea for the next video.

  • @hasanulhaquebanna
    @hasanulhaquebanna 2 місяці тому

    there is no backend or admin panel! Would you mind mentioning why it's a Fullstack? Won't we are creating MDX file statically or locally or by github, but at the end isn't it static?

  • @Егор-д3у4с
    @Егор-д3у4с 2 місяці тому

    Круто

  • @rakeshkumarparida98
    @rakeshkumarparida98 3 місяці тому

    Bro could you please bring part 2 of it where you can implement a functionality to add multiple images in blog page as code pallet?

  • @edgaralonso2396
    @edgaralonso2396 3 місяці тому

    Nice bro

  • @RamrachaiMarma
    @RamrachaiMarma 3 місяці тому

    Sadly it does not have many crucial bloggin features. Blog without ➡Search, ➡comment, ➡login, is like chicken curry without salt.

    • @codingjitsu
      @codingjitsu 3 місяці тому

      Feel free to clone down the project and add the features you need. Here is an example for Search implementation in Next.js 14: ua-cam.com/video/BiDg-kx04J8/v-deo.html

  • @cant_sleeeep
    @cant_sleeeep 3 місяці тому

    why swr? i don't understand? cant we just fetch in server components?

    • @codingjitsu
      @codingjitsu 3 місяці тому

      Server components excel at delivering pre-rendered content for optimal initial page load performance. SWR, on the other hand, is particularly effective for managing client-side data fetching and caching, offering a dynamic user experience. By strategically combining both approaches, we can create applications that deliver exceptional performance and user satisfaction.

    • @cant_sleeeep
      @cant_sleeeep 3 місяці тому

      @@codingjitsu yes but this doesnt explain why you chose it

  • @tech830
    @tech830 3 місяці тому

    but how we add more blogs in website?

    • @codingjitsu
      @codingjitsu 3 місяці тому

      By adding your markdown files in the project itself(in the contents folder) checkout: 13:00 - MDX Contents. Remember this is directed towards technical bloggers, this is similar how Supabase maintains their documentation within github.

    • @tech830
      @tech830 3 місяці тому

      @@codingjitsu Thanks understood! But doesn't it makes website heavy?

    • @codingjitsu
      @codingjitsu 3 місяці тому

      @@tech830 Short answer: Not necessarily. With proper optimization(SSG and ISR) in Next.js, you can build fast and efficient static blogs. Example: Next pre-renders your MDX content into HTML at build time. This means that users only download the generated HTML files, which are generally much smaller than the original MDX files

    • @tech830
      @tech830 3 місяці тому

      @@codingjitsu Uh, now my doubt clear!

  • @kartikmalik-d5s
    @kartikmalik-d5s 3 місяці тому

    Where is the admin panel

    • @codingjitsu
      @codingjitsu 3 місяці тому

      Your github will be your admin panel. Jut add your MDX files in the contents folder in github repo. checkout: 13:00 - MDX Contents

  • @saveriomazza7781
    @saveriomazza7781 3 місяці тому

    nice!

  • @sanjimchowdhury1409
    @sanjimchowdhury1409 4 місяці тому

    I was stuck in the official next.js documentation. Hopefully, I found you. Thanks a lot for making us pro, and I'm pretty confident now✊️

  • @gianbattistamaricosu1911
    @gianbattistamaricosu1911 4 місяці тому

    where are the web components ........??? Tottally useless video

  • @prashlovessamosa
    @prashlovessamosa 4 місяці тому

    Please create more stuff.

    • @codingjitsu
      @codingjitsu 4 місяці тому

      Preparing an e-commerce project with Next.js and Shopify. Stay tune.

    • @prashlovessamosa
      @prashlovessamosa 4 місяці тому

      @@codingjitsu great will wait for it

  • @kambampatirohith
    @kambampatirohith 4 місяці тому

    Great tutorial. Thanks for this!!!

  • @prashlovessamosa
    @prashlovessamosa 4 місяці тому

    hey budding loved it validation part is too informative for me keep creating and sharing good stuff with us

  • @deepakkumarchouhan1061
    @deepakkumarchouhan1061 4 місяці тому

    Can you help me to make my web ap fast I am working on Nextjs protect but my data fetching is too slow ?

    • @codingjitsu
      @codingjitsu 4 місяці тому

      Checkout the docs here: nextjs.org/docs/app/building-your-application/data-fetching

  • @codinginflow
    @codinginflow 4 місяці тому

    Your channel name is so cool!