Hamed Bahram
Hamed Bahram
  • 121
  • 1 762 239
Rate Limiting in NextJs with Middleware, Vercel KV Storage & Upstash
In this video, we'll look at rate limiting your NextJs application using edge middleware functions, Vercel KV (Kay value storage), and the Upstash rate limiting package.
👉🏼 The Ultimate NextJs Course (75% Off)
→ www.hamedbahram.io/courses/nextjs
👉🏼 Project source code
→ github.com/HamedBahram/next-rate-limiting
👉🏼 Vercel KV Quickstart
→ vercel.com/docs/storage/vercel-kv/quickstart
👉🏼 Upstash Rate Limit package
→ github.com/upstash/ratelimit-js
👉🏼 Work with me
→ www.hamedbahram.io/hire
Переглядів: 499

Відео

Caching in NextJs ft Delba Oliveira from Vercel
Переглядів 2,9 тис.12 годин тому
In this video, we'll discuss caching in NextJs with Delba Oliveira, developer advocate at Vercel, and the beautiful mind behind NextJs documentation. 👉🏼 The Ultimate NextJs Course → www.hamedbahram.io/courses/nextjs 👉🏼 NextJs caching documentation → nextjs.org/docs/app/building-your-application/caching 👉🏼 Work with me → www.hamedbahram.io/hire
Neon: Serverless Postgres Database
Переглядів 15 тис.19 годин тому
In this video, we'll build an expense tracker using Prisma, NextJs 15 RC, and Neon, a serverless Postgres database in the cloud that scales up and down automatically based on your application's workload. 👉🏼 Neon database → fyi.neon.tech/hamed 👉🏼 The Ultimate NextJs Course (75% discount) → www.hamedbahram.io/courses/nextjs 👉🏼 Project source code → github.com/HamedBahram/next-neon 👉🏼 Work with me...
How to build custom UIs on top of Clerk's APIs
Переглядів 32 тис.День тому
Introducing Clerk Elements, a new set of unstyled components that make it easy to build custom UIs on top of Clerk's API without having to manage the underlying logic. 👉🏼 Clerk elements documentation → go.clerk.com/elements-docs 👉🏼 Clerk website → go.clerk.com/hamed-bahram 👉🏼 New Clerk course → www.hamedbahram.io/courses 👉🏼 NextJs Clerk template → github.com/HamedBahram/next-clerk 👉🏼 Project so...
React Resizable Panels
Переглядів 10 тис.14 днів тому
In this video, we're going to use React resizable panels to build resizable components in NextJs. 👉🏼 New courses → www.hamedbahram.io/courses 👉🏼 Project source code → github.com/HamedBahram/react-resizable 👉🏼 React resizable panels → react-resizable-panels.vercel.app 👉🏼 Work with me → www.hamedbahram.io/hire Chapters 0:00 Intro 1:00 Project setup 1:46 Adding React resizable 7:30 Shadcn abstract...
In conversation with Colby Fayock from Cloudinary
Переглядів 37014 днів тому
Join me in a conversation with Colby Fayock from Cloudinary, where we will dive into his journey as a web developer, content creator, and now developer advocate at Cloudinary. 👉🏼 Colby's channel → www.youtube.com/@UC7Wpv0Aft4NPNhHWW_JC4GQ 👉🏼 New courses → www.hamedbahram.io/courses 👉🏼 Let’s talk about your project → www.hamedbahram.io/contact
Serverless Postgres ft Mahmoud from Neon
Переглядів 70121 день тому
Join me for a deep dive into Neon, a serverless Postgres database, and Prisma, a type-safe ORM, with Mahmoud, Developer advocate at @neondatabase. 👉🏼 New courses → www.hamedbahram.io/courses 👉🏼 Neon's website → neon.tech 👉🏼 Let’s talk about your project → www.hamedbahram.io/contact
Schema validation using Valibot
Переглядів 1,4 тис.21 день тому
This video will teach us about Valibot, a type-safe schema validation tool. 👉🏼 New courses → www.hamedbahram.io/courses 👉🏼 Project source code → github.com/HamedBahram/next-valibot 👉🏼 Next shadcn template → github.com/HamedBahram/next-shadcn 👉🏼 Valibot website → valibot.dev Chapters 0:00 Intro 1:00 Installation 7:30 Implementation 16:10 Client side validation 17:50 Recap
The Easiest Way to Add Charts in NextJs
Переглядів 2 тис.28 днів тому
This video will look at adding charts in NextJs using Tremor. 👉🏼 My NextJs Course → www.hamedbahram.io/courses 👉🏼 Project source code → github.com/HamedBahram/next-tremor 👉🏼 Tremor site → www.tremor.so 👉🏼 Work with me → www.hamedbahram.io/hire
Blurred placeholder for dynamic images in NextJs
Переглядів 2,8 тис.Місяць тому
In this video, we’ll look at generating `blurDataURL` to use as a placeholder when lazy loading dynamic images in NextJs using the plaiceholder package. 👉🏼 The ultimate NextJs course → www.hamedbahram.io/courses 👉🏼 Project source code → github.com/HamedBahram/next-image-component 👉🏼 Work with me → www.hamedbahram.io/hire
The New React Compiler
Переглядів 1,9 тис.Місяць тому
In this video, we'll look at the new open-sourced React compiler released in React 19 RC. We'll learn what it does and how to use it in NextJs 15 RC. 👉🏼 New courses → www.hamedbahram.io/courses 👉🏼 Source code → github.com/HamedBahram/next-15rc 👉🏼 React compiler docs → react.dev/learn/react-compiler 👉🏼 React conf 2024 recap → react.dev/blog/2024/05/22/react-conf-2024-recap 👉🏼 Let’s talk about yo...
React Conf 2024 Recap | React 19 RC Release
Переглядів 1 тис.Місяць тому
Reflecting on React conf 2024, this video will review the React 19 RC release and the new features coming to stability. 👉🏼 New courses → www.hamedbahram.io/courses 👉🏼 React conf 2024 → react.dev/blog/2024/05/22/react-conf-2024-recap 👉🏼 React 19 RC → react.dev/blog/2024/04/25/react-19 👉🏼 Work with me → www.hamedbahram.io/hire Chapters 0:00 Intro 4:50 Actions & transitions 12:05 The use API 14:26...
What's New in NextJs 15
Переглядів 19 тис.Місяць тому
In this video, we'll review the latest features in NextJs 15 Release Candidate (RC) before the upcoming stable release. 👉🏼 The ultimate NextJs course → www.hamedbahram.io/courses 👉🏼 React Conf 2024 → ua-cam.com/users/liveT8TZQ6k4SLE?t=1788 👉🏼 Vercel ship 2024 → vercel.com/ship 👉🏼 Let’s talk about your project → www.hamedbahram.io/contact Chapters 0:00 Intro 2:00 React compiler 3:30 Hydration er...
Animating Background Gradients using Framer Motion
Переглядів 2,8 тис.Місяць тому
In this video, we'll use framer motion to animate our background gradient colors. 👉🏼 New courses → www.hamedbahram.io/courses 👉🏼 Project source code → github.com/HamedBahram/bg-gradient-animation 👉🏼 Work with me → www.hamedbahram.io/contact
Sync Clerk Data to Your Database Using Webhooks
Переглядів 47 тис.Місяць тому
In this video, we'll examine how to sync user data from Clerk to our database using webhooks. We will use Prisma as our ORM to connect to Mongodb for end-to-end type safety. 👉🏼 Clerk Authentication → go.clerk.com/9AXfPV7 👉🏼 Learn Clerk → www.hamedbahram.io/courses 👉🏼 Clerk setup guide → ua-cam.com/video/aI-tDJxWI6A/v-deo.html 👉🏼 Next-Clerk template → github.com/HamedBahram/next-clerk 👉🏼 Project...
Project Structure and File Conventions in NextJs 14
Переглядів 28 тис.Місяць тому
Project Structure and File Conventions in NextJs 14
Using Prisma with Turborepo
Переглядів 2,3 тис.Місяць тому
Using Prisma with Turborepo
Next.js Deep Dive with Lee Rob, VP of Product at Vercel
Переглядів 34 тис.2 місяці тому
Next.js Deep Dive with Lee Rob, VP of Product at Vercel
Partial Prerendering in NextJs 14
Переглядів 36 тис.2 місяці тому
Partial Prerendering in NextJs 14
What's coming up in Tailwind V4
Переглядів 2,2 тис.2 місяці тому
What's coming up in Tailwind V4
Leveraging NextJs & Prismic CMS | Project Showcase with Studio OBV
Переглядів 1,2 тис.2 місяці тому
Leveraging NextJs & Prismic CMS | Project Showcase with Studio OBV
Clerk Keeps Getting Better | Core 2.0 Setup Guide
Переглядів 14 тис.2 місяці тому
Clerk Keeps Getting Better | Core 2.0 Setup Guide
The Best Video Infrastructure for Your Application
Переглядів 2 тис.2 місяці тому
The Best Video Infrastructure for Your Application
What's New in NextJs 14.2
Переглядів 73 тис.2 місяці тому
What's New in NextJs 14.2
Zeno Rocha: Founder and CEO of Resend | Podcast E4
Переглядів 5542 місяці тому
Zeno Rocha: Founder and CEO of Resend | Podcast E4
Dynamic Catch-all Routes in NextJs 14
Переглядів 15 тис.2 місяці тому
Dynamic Catch-all Routes in NextJs 14
Monetize your API in under 30 minutes
Переглядів 1,5 тис.3 місяці тому
Monetize your API in under 30 minutes
Kevin Powell: The CSS King | Podcast E3
Переглядів 1,8 тис.3 місяці тому
Kevin Powell: The CSS King | Podcast E3
On-demand revalidation in NextJs 14
Переглядів 8 тис.3 місяці тому
On-demand revalidation in NextJs 14
Build Object Detection Using Free Open-source AI Models
Переглядів 2,1 тис.3 місяці тому
Build Object Detection Using Free Open-source AI Models

КОМЕНТАРІ

  • @rayhanislam7518
    @rayhanislam7518 17 годин тому

    Is it work without vercel? It's paid

  • @farzadmf
    @farzadmf День тому

    I'm confused; does this really help? If we're doing rate limiting at our own application level, the requests will be considered traffic to our application, and we WILL be charged for those. Also, we're redirecting again at our own app level, so technically they could [D]DOS us by sending millions of requests. In my mind, the rate limiting part should be done BEFORE traffic reaches our app to avoid charges and our sever going down Am I missing something?

  • @ofeklevy1242
    @ofeklevy1242 День тому

    and how can i rate limit all my application routes?

  • @ofeklevy1242
    @ofeklevy1242 День тому

    Hey great video , how can i rate limit a server action?

  • @Benjamin-Chavez
    @Benjamin-Chavez День тому

    Fantastic video! Thank you to you both for this one!

  • @ambiguity1768
    @ambiguity1768 2 дні тому

    I'm new and I ran into a problem where Header should be a server component because I need to use another server component (ShoppingCart) inside the client component and because of this absolutely everything is marked as dynamic after the build, is this a bad practice?

    • @hamedbahram
      @hamedbahram 2 дні тому

      Using server components doesn't mean dynamic unless you're using dynamic functions such as `cookies` and `headers` which are request specific. I can't really judge if you're implementation is good or bad with this limited knowledge.

    • @ambiguity1768
      @ambiguity1768 2 дні тому

      @hamedbahram I use a session-based shopping cart cause I do not have user authentication, and it was the only way to save cart data after closing the browser. And it looks like this: <header> (server component as it's async) <HeaderLogo /> (client component) <Navbar cartItems={<CartItems /> (server component)} (client component) </header> So with this approach, everything is marked as dynamic after I build my app ├ λ /api/cart 0 B 0 B ├ λ /api/post/getCities 0 B 0 B ├ λ /api/post/getStreets 0 B 0 B ├ λ /api/post/getWarehouses 0 B 0 B ├ λ /api/orders/[id] 0 B 0 B ├ λ /api/products 0 B 0 B ├ λ /api/products/[id] 0 B 0 B ├ λ /api/wishlist/info 0 B 0 B ├ λ /availability 1.55 kB 98.3 kB ├ λ /availability/[id] 3.02 kB 93 kB ├ λ /checkout 22.8 kB 120 kB ├ λ /checkout/thanks/[id] 731 B 92.5 kB ├ λ /contacts 929 B 90.9 kB ├ λ /remote-coats-tailoring 149 B 85.1 kB ├ λ /sewing-wedding-looks 149 B 85.1 kB └ λ /wishlist 1.54 kB 98.3 kB + First Load JS shared by all 84.9 kB ├ chunks/69-8c83f0eba123e7da.js 29 kB ├ chunks/fd9d1056-4de4c9f7a62437cd.js 53.4 kB └ other shared chunks (total) 2.53 kB ƒ Middleware 26.8 kB λ (Dynamic) server-rendered on demand using Node.js And I was wondering if it's a good practice to do things like that.

  • @ig_atlantis
    @ig_atlantis 2 дні тому

    Can u make a video on login with GitHub or Google along with Sign in using email and password in next auth.

  • @ig_atlantis
    @ig_atlantis 2 дні тому

    Nice. Just wanted the solution and got it.

  • @AamirSohail-k7b
    @AamirSohail-k7b 2 дні тому

    hello

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

    she is the best

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

    Do you think the App Router is still a good choice for apps that don't do any server stuff themselves? Like connecting to an external BFF and interacting with it through client components?

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

      Absolutely! First of all, the app router is not just for using server components, there is nothing wrong with using client components at all. Secondly, even client-side apps have parts that are static and can be served from the server like layouts, with new features like partial pre-rendering I think the app router is the way to go no matter what.

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

    thanks, its work

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

    The theme provider adds the dark or light class that then throws this error: Prop `className` did not match. Server: "__className_3a0388 dark" Client: "__className_3a0388" Any help with a fix?

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

      Clone my code and see what you're doing differently. For additional resource read here → github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch

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

      @@hamedbahram Cool I'll check it out. Thank you! Great videos.

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

      @@hamedbahram The solution as far as I can tell was the use of supressHydrationWarning in the <html return of the root layout.ts

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

    Amazing talk. ♥ Thanks

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

    I can't see the reason why the NextJS team is fighting so hard to keep caching as a default. In my opinion the first and most important goal of any project is to have something working reliably and performance is only secondary.

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

      I agree that reliability should come first and performance second; however, I think NextJs, and specifically caching is pretty stable. I think the problem is more the decoupling of data fetching and rendering work that may have complicated the adoption for some developers who are used to the APIs in the `pages` router.

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

    Congratulations for 111k 🎉 Learned a lot from u and also enjoyed this podcast ❤🤗

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

      Thank you so much 😊 I'm glad you enjoyed the conversation with Delba!

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

    Which theme or font are you using on VsCode? I like it.

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

      Theme: Dark+ Italic and the font is Operator mono

  • @markpieterse2974
    @markpieterse2974 5 днів тому

    Thx for content Mr. Next js, gr from Netherlands

  • @Mirislomovmirjalol
    @Mirislomovmirjalol 5 днів тому

    First time seeing Delba in not black😅😅

    • @hamedbahram
      @hamedbahram 5 днів тому

      That's right! Some shades of blue for the love of React :)

  • @kaitakami_
    @kaitakami_ 5 днів тому

    Great content like always!

  • @imkir4n
    @imkir4n 5 днів тому

    Hi Hamed, I just noticed you passed 100k! Wow, congratulations!

  • @teacookie-wynn
    @teacookie-wynn 5 днів тому

    Finally someone talking about custom themes...

  • @niconel7659
    @niconel7659 5 днів тому

    For incase this help anyone: Wanted to pull my hair out because locally (using ngrok) all worked 100, but when deployed to vercel, i did not even see the request coming in (logs) and just failures in Clerk. Turns out if you have Attack Challenge Mode turned on in Vercel (Settings=>Security) it seems to block out incoming request from Vercel (funny enough, I did a little test a while ago scraping my own site with selenium/coypu and could scrape my site with Attack Challenge Mode enabled)

  • @tiltMOD
    @tiltMOD 5 днів тому

    Dear Hamed, having you as a connection on LinkedIn and knowing you’ve been in the English speaking part of the world for only a decade, I find it beyond impressive how fluently and effortlessly you speak the language! Not to mention the impact you have on web devs despite coming from a different background 🎉

    • @hamedbahram
      @hamedbahram 5 днів тому

      Aww thank you, that's very nice, I appreciate that! I'm glad I've been able to help. Who do I have the pleasure of speaking with?

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

      ​@@hamedbahram It's Nojan 🙂Connected with you in the recent months 🙌

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

      @@tiltMOD My pleasure, Nojan! Glad to have connected with you.

  • @gerkim3046
    @gerkim3046 5 днів тому

    Delba Oliveira looks like she is ever smiling. I watched the podcast instead of listen because of her😂

  • @hassanallen1823
    @hassanallen1823 5 днів тому

    Great talk hamed Jan with Oliveira ❤❤❤

  • @MohamedElguarir
    @MohamedElguarir 5 днів тому

    Great talk, thanks 🙏

  • @afshinkaramifar4429
    @afshinkaramifar4429 5 днів тому

    Amazing ❤, Thanks to Hamed and Delba😊

    • @hamedbahram
      @hamedbahram 5 днів тому

      Absolutely! Thanks for tuning in!

  • @santyas
    @santyas 5 днів тому

  • @alfonsomartinangeles6176
    @alfonsomartinangeles6176 5 днів тому

    Does this component handle the condition to run only in production? or should I put a condition manually to run on prod only? Thank you!

    • @hamedbahram
      @hamedbahram 5 днів тому

      You have to do that manually by excluding the traffic from your dev domains or local host in your Google analytics.

  • @CREATE-oo8xg
    @CREATE-oo8xg 6 днів тому

    Great stuff. Thank you!

  • @ianthediver2541
    @ianthediver2541 6 днів тому

    Thank you Hamed. I really appreciate your clear measured delivery. I have problem I hope you can help me with. Everything works fine up to 16.5. If at that point I change something in the columns.tsx file e.g. header: "name" to header: "Name" and save; I see that the page momentarily re-renders as expected (i.e. with Name) then reverts back to the previous page (i.e. name) and I get a Hydration error "Text content did not match. Server: "Name" Client: "name". "Empty Cache and hard reload" does correct the text or clear the error. I have checked "disable cache" in Developer tools > Network. I have tried deleting .next directory Building and running in production makes the change (i.e. to Name). name to Name is a simple example for illustrative purposes, but I am struggling to develop the code, when in order to test I have to stop the development server, build production and restart development. I am using NextJS v14.2, React 18.3

    • @hamedbahram
      @hamedbahram 5 днів тому

      My pleasure! I'm glad you found it helpful. As far as the hydration error, have you marked the `column.tsx` as a client component?

    • @ianthediver2541
      @ianthediver2541 5 днів тому

      @@hamedbahram Thank you, yes (columns.tsx is marked 'use client'), I even made a new project and copied the shadUI code exactly. I think it may be a bug. I don't think I can post links here but there is a bug posted on the ShadUI GitHub page "DataTableDemo causes Hydration Error in Nextjs" and I have asked a question on StackExchange "NextJS ShadhUI datatable persistent cache".

  • @saiguna6676
    @saiguna6676 6 днів тому

    Thank you for the amazing video but if i have optional fields it's not working for that one how to solve it sir

    • @hamedbahram
      @hamedbahram 5 днів тому

      What is an optional field, one that's not required you mean?

  • @mohsenmohammadirahnama
    @mohsenmohammadirahnama 7 днів тому

    Can you help me how to use Swiper in ssr page in Nextjs14?

    • @hamedbahram
      @hamedbahram 7 днів тому

      Swiper requires browser APIs and can only be used in client components.

  • @27sosite73
    @27sosite73 7 днів тому

    nice

  • @MF-hx8or
    @MF-hx8or 8 днів тому

    حامد جان واقعا فوق العاده بود ، من دارم روی زبانم کار میکنم که مثل شما وارد یوتیوب بین المللی بشم و از شما درس میگیرم ❤

    • @hamedbahram
      @hamedbahram 7 днів тому

      That's amazing! I'd be glad to help :)

    • @dev-akeel
      @dev-akeel 7 днів тому

      @MF-hx8or هل لديك قناة ما حاليا؟

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

    The login portion of your website is not working. I bought the course but cant log in

    • @hamedbahram
      @hamedbahram 7 днів тому

      Sorry to hear that, I've sent you an email to resolve the issue.

  • @evgeniik_
    @evgeniik_ 8 днів тому

    When the ThemeToggle is created it is not mentioned that the ThemeToggle need to be imported to the page.tsx (in this case it's a route page) - import ThemeToggle from "@/components/ThemeToggle"; - correct me if I am wrong.

  • @niconel7659
    @niconel7659 8 днів тому

    Need a little push in the right direction. So I got this all working (Clerk users in my db with roles and memberships) What would be the best way to check the current user (incl. their role/membership, which are stored in my database)? Wrap the app with my own context? But use context is client side only. Hmm...still so new, huge gaps in my knowledge

    • @hamedbahram
      @hamedbahram 7 днів тому

      I would use Clerk's helper function to check the current user. For instance, on the server, auth() and currentUser() are App Router-specific helpers. You can also use the `useAuth` hook on client-side. Here is a link to the docs for further reading → clerk.com/docs/references/nextjs/read-session-data

  • @kenshinhimura3140
    @kenshinhimura3140 8 днів тому

    The most complicated video you made. I am using prisma and prisma client. Then I take use the link that prisma give. Why your video is so complicated? Why the neon server less driver?

    • @hamedbahram
      @hamedbahram 7 днів тому

      You can continue to use the Prisma client and skip that step, It's absolutely fine to use the Prisma client if you don't intent to query your database from the edge runtime (e.g middleware function in NextJs). The Neon serverless driver is a low latency driver that allows you to query your database over HTTP.

    • @destocot1729
      @destocot1729 7 днів тому

      @@hamedbahram Do you have good resources to really understand what this all means over HTTP, serverless etc. I have been using Next.js for a few months now but I still dont really know what they mean by serverless

    • @dev-akeel
      @dev-akeel 7 днів тому

      ​@@destocot1729 Serverless means Server Less, I mean (sort of).

    • @hamedbahram
      @hamedbahram 6 днів тому

      @@destocot1729 That can make a topic for a video I don't have yet. You can check here for further reading → nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

  • @niconel7659
    @niconel7659 8 днів тому

    This was awesome. Waiting eagerly for your course.

  • @rakibsiddiki6380
    @rakibsiddiki6380 8 днів тому

    please provide your notion documentation also.

    • @hamedbahram
      @hamedbahram 7 днів тому

      I'll publish that as a post on my site soon!

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

    Hello, my friend. First of all, thank you very much for the content, it's invaluable. I'm in a situation where I need three middlewares, only one of which needs to return the header globally. However, it's not working as expected. Is there a way to make NextResponse keep sending the response data (headers) to the last middleware?

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

      to solve this problem temporarily, the middleware responsible for these configurations was placed last in the array

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

      My pleasure! Yes, I've actually updated the code in the repo to pass the response object down in the middleware chain. Have a look at the code.

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

      I don't know if I was able to express myself well. 🤭

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

    So whenever and wherever we use the “getDictionary” function, it will make call to get JSON? If I need to use this function like 100 times to render a page, just because it is an async function and imports a JSON, it will slow down the page rendering time. Any thoughts?

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

      You can wrap it in React's `cache` function to avoid calling it multiple times during a render pass.

    • @sahilsworkmail
      @sahilsworkmail 7 днів тому

      @@hamedbahram I did this but getting this error Server Error TypeError: react__WEBPACK_IMPORTED_MODULE_1___default(...).cache is not a function

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

    You crazy delegating such an important part to 3rd party library… Stop spreading bad engineering

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

      I think it's crazy to do auth yourself unless you really know what you're doing.

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

    Thank you for the video. I have a question, how would you implement internationalization and localization (multi-region and multi-translation site) in Nextjs 14, like /[lang]/[region], with removing the default locale and region. Is it possible?

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

      My pleasure! It would be a very similar concept to what we've done here.

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

      @@hamedbahram could you maybe create a video / repository with an example? I'm struggling with that... The default one if you go to '/' would be '/en/row' (both hidden from the url that user sees). Regions -> row, eu, us and au

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

    amuzeshat harf nadare dash hamede aziz <3

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

    too much code in one component killed the main motive of react, it would have better to also show if each form is in different component because form could be bigger

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

      This video is not so much about React component composition but more so about the concept of a multi-step form implemented using react-hook-form and zod for validation.

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

      Using multiple forms for this lesson would have made the video too complicated for me. I think for delivering the intended concept, he chose the best approach. Once we understand the concept it’ll be much easier to na split the form into much smaller forms as we want and he mentioned it clearly 😊

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

      @@hamedbahramthanks man, keep them coming ❤

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

    for this use methods , only use server components right ?

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

    Great intro. I wish the documentation just had a few more examples and hints and tips. But you completed it. Got a datatable up and running fetching SharePoint-data on a SharePoin site now. (Dont get me started on using tailwind and ShadCNUI on SPFX (SharePoint framework and React 17). Wow. That was the struggle. The DataTable part you fixed with this video!

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

      Glad it was helpful!

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

      @@hamedbahram Could you do a follow up with more advanced sorting and filtering? :)