- 10
- 431 005
Delba
United Kingdom
Приєднався 1 вер 2015
Developer Experience for Next.js and Vercel ▲
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
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...
Thank you.
Well done Delba. I am speechless. Clear, simple, informative, friendly. Very well done!
idk rick
best one so far.
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 **
No words wasted. Perfection.
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!
Don't forget to secure your cookies when pushing to prod!
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?
Instead of watching memes while eating I decided to watch your video out of curiosity. I made a good decision. Thanks for sharing!
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
I have no interest in deving you know why i am here
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.
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.
This is such an awesome video, may I ask what you used to make the "slides"?
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
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
This was very helpful, thank you
What is your VS code theme and font family
Damn, this font is so awesome, can u share your font vscode settings?
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.
Fireship got me here xD
100 seconds huh? hmm...sounds familiar >:(
Hi, was this directive only possible in next 15 canay ?
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.
Fireship has the eye on you. Stay safe queen. Kisses and Hugs
fireship know you stole his trademark in his latest video😂😂
It was a joke
@@N0Xa880iUL I know as well and do you think i am serious?😂😂
watch this video then just click subscribe button
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
what is the name of your VS code theme and font family ?
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.
so much help understanding server component. thanks and looking foward to the next video!
Finally Next.js might be actually usable after this one, no more clicking and then waiting for the next route to load
best best best
wtf perfect content. Thank you
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
thx soo much love from India
great video thanks a lot greetings from sanjuanistan
Great video. But what font are you using for code snippets? Looks cool.
Thank you. It's Geist Mono.
This is a really cool explanation
impressive, thanks
@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
Thank you! All the best learning JS
wow very useful
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.
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.
How your courses is made?
I use Remotion.
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.
Thank yu, please which software are you using to make this smooth animation on your code when you explain it
Simply brilliant explanation, thanks for sharing!
Can you teach me how you edit your videos?
Amazing explanation and the way it's done!👍