Delba
Delba
  • 10
  • 431 005
Next.js 'use cache' in 100 seconds
Quick overview of new experimental Next.js APIs: 'use cache', cacheTag, and cacheLife.
00:00 - Intro
00:15 - Choose...
00:32 - Dynamic
00:49 - Static
01:08 - Partial
01:31 - Revalidation
More:
• Our Journey with Caching: nextjs.org/blog/our-journey-with-caching
• Next.js Conf Keynote: ua-cam.com/video/19g66ezsKAg/v-deo.html
Переглядів: 28 519

Відео

React visually explained: 'use client'
Переглядів 59 тис.Місяць тому
What 'use client' is, why it exists, how it works, and how to use it. The 'use client' directive introduces a new dimension to bundling: allowing developers to use the same language and JSX component model for UI concerns that span the client and server. Replacing network synchronization code in multiple languages, routing systems, and frameworks with simple components and props. This is an exc...
Next.js: Authentication (Best Practices for Server Components, Actions, Middleware)
Переглядів 146 тис.5 місяців тому
Best practices for authentication in Modern Next.js and React: Server Components, Server Actions, Middleware. Docs: rc.nextjs.org/docs/app/building-your-application/authentication Code: github.com/vercel-labs/app-router-auth 00:00 Intro 00:25 Forms and Server Actions 00:51 Form validation 01:06 useActionState 01:45 Creating a user 02:14 Session management 04:13 Authorization 04:37 Middleware 05...
Visually explained: Bundling in 60 seconds
Переглядів 26 тис.7 місяців тому
Visually explained: Bundling in 60 seconds
Next.js Visually Explained: Partial Pre-rendering (PPR)
Переглядів 50 тис.9 місяців тому
What exactly is Partial Prerendering? How does it work? And most importantly, why does it matter? 00:00 Intro 00:12 What is Prerendering? 01:31 Single paradigm frameworks 02:59 The problem with static and dynamic 04:09 Current Next.js behavior 04:45 React boundaries to the rescue 06:05 How does Partial Prerendering work? 07:24 How is Partial Prerendering different? 08:39 Benefits of both static...
Next.js Explained: Static vs. Dynamic rendering
Переглядів 10 тис.10 місяців тому
Docs: nextjs.org/docs/app/building-your-application/rendering/server-components
Next.js Explained: Creating Routes
Переглядів 8 тис.Рік тому
Hey, long time. I'm starting a new video series to visually explain Next.js and React concepts. Let me know what concepts you'd like to see next. 🖤
Next.js 13: Prevent Common Mistakes w/ New TypeScript Plugin
Переглядів 28 тис.2 роки тому
Next.js 13 comes with a new TypeScript plugin! We're bringing autocomplete for config options, in-context docs right into your editor, and helping surface common Next.js and React errors before you even hit save. Read the Docs: beta.nextjs.org/docs/configuring/typescript
Next 12.1: Regenerate a static page when its data changes
Переглядів 24 тис.2 роки тому
A quick demo of On-Demand Incremental Static Regeneration (ISR), new feature just launched in Next.js 12.1 - Regenerate static pages, on demand without having to rebuild the entire site or having to wait for a specific revalidation interval. - Find this example on Github: github.com/delbaoliveira/website/blob/main/pages/api/tweets/revalidate.ts - Learn more on Next.js docs: nextjs.org/docs/basi...
How I Built the Portfolio That Landed Me a Dev Role (Tech Stack Explained)
Переглядів 51 тис.3 роки тому
Hi 👋 My name is Delba. In this video, I go through how I built the website/portfolio that helped me land my first developer role at one of my dream companies. ⏱️ TIMELINE: 00:00 - Introduction 00:40 - Content 01:20 - Design 02:41 - Code 03:06 - Typescript 04:27 - Tailwind 05:31 - Next.js 06:31 - MDX 07:16 - Prisma 08:02 - Hosting 08:35 - Conclusion 📚 RESOURCES: ◆ Building an Effective Dev Portf...

КОМЕНТАРІ

  • @sabuein
    @sabuein 2 години тому

    Thank you.

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

    Well done Delba. I am speechless. Clear, simple, informative, friendly. Very well done!

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

    idk rick

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

    best one so far.

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

    The main solution for authentication in nextjs using server components is: **Password to decrypt cookie** without the password? const cookie = (await cookies()).get('session')?.value const session = await decrypt(cookie) if (!session?.userId) { redirect('/login') } return { isAuth: true, userId: session.userId } Even I don't need add user Id to cookie, only if I will validate user Id and session Id in database. That's all! But if we use api routes we need csrf tokens by the way Good to know: API Routes do not specify CORS headers, meaning they are same-origin only by default. You can customize such behavior by wrapping the request handler with the CORS request helpers. **"Good to know" is not true, I can fetch api routes from anywhere **

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

    No words wasted. Perfection.

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

    This is one of the most informative videos I’ve watched in a while and you’ve opened up a world of ideas for me now. Keep it up!

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

    Don't forget to secure your cookies when pushing to prod!

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

    Can components be cached? If so, has it been converted to static HTML? What would it be like in terms of performance to convert dynamic data, such as comments, to HTML on the server and present it statically in every request?

  • @Carlos-gj1wj
    @Carlos-gj1wj 6 днів тому

    Instead of watching memes while eating I decided to watch your video out of curiosity. I made a good decision. Thanks for sharing!

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

    finally , tutorial that is actually useful and to the point - unlike stupid and rants from popular content makers in this space - kudos in this work - please keep making more such videos - wonderful video

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

    I have no interest in deving you know why i am here

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

    Thank you for sharing vid. It would be fantastic if you post another vid for interconnecting outside api server. this approach is only useful to verify session if you fetch data connects to db server directly. sending fetch/post request to api server like expressJs need to intercept and refresh token. It is really hard to find proper approach since NextJs focused to server component process. Please and thanks.

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

    I've kinda hyped myself up, because I'm always the guy that has to go in and explain caching in NextJS to people. I solve caching and optimization issues all the time. You're gonna make me irrelevant. You're making it too easy.

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

    This is such an awesome video, may I ask what you used to make the "slides"?

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

    how she does this transition ua-cam.com/video/N_sUsq_y10U/v-deo.html what is your video editing stack? @Delba Cause video is dope

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

    this video is very impressive.. I almost lost with comes of authenticate and authorization in next js . this video is very helpful. and explained well

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

    This was very helpful, thank you

  • @vivekkumar-qu4tp
    @vivekkumar-qu4tp 9 днів тому

    What is your VS code theme and font family

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

    Damn, this font is so awesome, can u share your font vscode settings?

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

    Thank you for your detailed explanation. History time really helped me to understand what problem partial pr solves. But still, I have a confusion. In Next.js 15, the response of the fetch request is not cached by default. So now, isn't a fetch request an uncached data request? If yes, then how does a route with a default fetch configuration still statically render? Because as we know, If you use dynamic api/ uncached data request in a route, the route becomes dynamically rendered.

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

    Fireship got me here xD

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

    100 seconds huh? hmm...sounds familiar >:(

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

    Hi, was this directive only possible in next 15 canay ?

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

    Seriously? Copying Fireship's title and style? That’s lazy and misleading. You’re just clogging search results and stealing views from the original creator. Do better.

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

    Fireship has the eye on you. Stay safe queen. Kisses and Hugs

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

    fireship know you stole his trademark in his latest video😂😂

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

      It was a joke

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

      @@N0Xa880iUL I know as well and do you think i am serious?😂😂

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

    watch this video then just click subscribe button

  • @VitorLostada
    @VitorLostada 12 днів тому

    Hey, I'm a creator too, and I loved what you did, which app do you use to create these code animations on your videos? by the way, thanks for the nice content

  • @vivekkumar-qu4tp
    @vivekkumar-qu4tp 12 днів тому

    what is the name of your VS code theme and font family ?

  • @DanhezCode
    @DanhezCode 12 днів тому

    Important question: Next.js is supposed to know when a component is dynamic when it accesses an API or dynamic content as parameters to work correctly, if so how would it work with internationalization? Because it is necessary to access the “locale” or “lang” parameter in practically all content and therefore you would have to wait for this parameter. In that case I would mark it as dynamic and the partial prerender would not work because it would have to wait.

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

    so much help understanding server component. thanks and looking foward to the next video!

  • @Maolo92
    @Maolo92 14 днів тому

    Finally Next.js might be actually usable after this one, no more clicking and then waiting for the next route to load

  • @stacksagar
    @stacksagar 14 днів тому

    best best best

  • @umutakalin6218
    @umutakalin6218 15 днів тому

    wtf perfect content. Thank you

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

    2:21 I like how you visually guide the viewer of your site to a decisive action in a form of a flirty question, that nobody would say no to! :D "Hire me?" :D 4:58 When speak about your though process on styles you want apply to your button - IT MAKES SO MUCH SENSE - and then you write the tailwind in classNames - that feels SO NATURAL, same as you would write a sentence in english! Amazing! I never realized it before :D

  • @ItzluciferAloneboy-jg3xx
    @ItzluciferAloneboy-jg3xx 16 днів тому

    thx soo much love from India

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

    great video thanks a lot greetings from sanjuanistan

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

    Great video. But what font are you using for code snippets? Looks cool.

    • @Delba
      @Delba 15 днів тому

      Thank you. It's Geist Mono.

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

    This is a really cool explanation

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

    impressive, thanks

  • @tanveerahmed8355
    @tanveerahmed8355 17 днів тому

    @Delba very informative and legitimate way of explanation makes the concepts understand easily May God bless you with good health, wealth and prosperity 🎉 Keep up the good work. Though I'm a WordPress Developer holds a keen interest in learning the frontend JS frameworks and their utilization However your way of explanation has shed upon a light on my thoughts Learning the basics of JavaScript then proceed for any of its frameworks

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

      Thank you! All the best learning JS

  • @uditmehra80
    @uditmehra80 17 днів тому

    wow very useful

  • @mustafahere01
    @mustafahere01 17 днів тому

    Why is Next.js becoming more complex with each new version update? Instead, you should focus on maintaining compatibility with previous versions, as many features get deprecated with each new release.

    • @Delba
      @Delba 15 днів тому

      These changes are designed to be simpler. They are iterated on after feedback from the community and lessons learned. We rarely deprecate APIs (there have been no major deprecatations in version 13, 14 or 15) instead we provide refined APIs and allow the community to migrate at their own pace.

  • @codingjogo
    @codingjogo 17 днів тому

    How your courses is made?

    • @Delba
      @Delba 15 днів тому

      I use Remotion.

  • @zanec7202
    @zanec7202 17 днів тому

    I was scrolling through youtube and clicked on this out of curiosity, this is probably one of the best videos explaining/teaching i've seen its at a perfect speed not super slow not lightning fast . Perfect.

  • @Dev_Bach
    @Dev_Bach 18 днів тому

    Thank yu, please which software are you using to make this smooth animation on your code when you explain it

  • @allanfrancis5760
    @allanfrancis5760 18 днів тому

    Simply brilliant explanation, thanks for sharing!

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

    Can you teach me how you edit your videos?

  • @yurii_kozlov
    @yurii_kozlov 18 днів тому

    Amazing explanation and the way it's done!👍