Delba Profile Banner
Delba Profile
Delba

@delba_oliveira

29,442
Followers
459
Following
295
Media
2,541
Statuses

DX @nextjs at @vercel ▲ I build apps, write docs, and create videos about Next.js and React.

UK
Joined August 2017
Don't wanna be here? Send us removal request.
Pinned Tweet
@delba_oliveira
Delba
4 months
Next.js Explained: Partial Prerendering What exactly is Partial Prerendering? How does it work? And most importantly, why does it matter?
120
304
2K
@delba_oliveira
Delba
8 months
I’m exploring a new video series to visually explain Next.js and React concepts. Open to feedback 🖤 Episode 1: Next.js Filesystem Routing
218
308
4K
@delba_oliveira
Delba
2 years
Light reflection. But make it UI. Here's an idea for your loading skeletons. Let's create a shimmer animation with @tailwindcss
54
320
3K
@delba_oliveira
Delba
1 year
Next.js 13 comes with a new TypeScript plugin. We're bringing in-context docs right into your editor and helping surface errors before you even hit save. Excellent work by the illustrious @shuding_
53
251
2K
@delba_oliveira
Delba
18 days
React 19: useFormState → useActionState
32
167
2K
@delba_oliveira
Delba
2 years
We've updated the Next.js Layouts RFC. Here's a summary of the new proposed features. 1️⃣ New optional files that make it easy to add nested loading and error UI. We expect most of your app will use `page.js` and `layout.js`, but you can reach for these other files if needed.
Tweet media one
33
220
2K
@delba_oliveira
Delba
1 year
Today, 4 years ago, I made my first contribution to the @Nextjs docs: Now I'm building the new docs 🤯 🫠 We migrated to App Router, addressed 1k+ comments, and created a new diagram system. Here are the tools we used, but first, Server Components:
Tweet media one
40
88
1K
@delba_oliveira
Delba
17 days
React 19: forwardRef → ref
31
155
1K
@delba_oliveira
Delba
16 days
React 19: Context.Provider → Context useContext → use
28
160
1K
@delba_oliveira
Delba
4 months
Static vs. Dynamic rendering in Next.js
30
144
1K
@delba_oliveira
Delba
2 years
The @nextjs team has been quietly rebuilding the foundation of Next.js using Server Components, Suspense, Streaming, etc. These changes affect features across the board so we're taking the opportunity to work on a new structure for the docs ✨ Here's an early preview:
22
121
1K
@delba_oliveira
Delba
3 years
We've just released the first iteration of the Next.js Testing Docs: 🧪 We wanted to provide a starting point for those looking to set up Next.js with 3 commonly used testing tools: @cypress_io , @fbjest and React @TestingLib .
20
207
1K
@delba_oliveira
Delba
2 months
React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle.…
38
163
1K
@delba_oliveira
Delba
1 year
TIL you can toggle Suspense boundaries in React Dev Tools for easy debugging. Useful for making sure your loading skeletons line up with your real content. h/t @sebmarkbage ✌️
18
140
1K
@delba_oliveira
Delba
9 months
We added a new section in the Next.js Docs: Caching ↳ Here's the TLDR for those who want a better understanding of the different caching layers and how they relate to Server Components and newer APIs:
Tweet media one
42
162
1K
@delba_oliveira
Delba
1 year
New in Next.js: File-based Metadata API 1. Drop an Icon or OG image into `/app` and Next.js will auto-generate robot-friendly metadata for you. 2. Generate image, robots, sitemap, and manifest files using type-safe APIs.
Tweet media one
25
165
1K
@delba_oliveira
Delba
1 year
Shipped a new Next.js Docs Page! Project Structure: An overview of all the file and folder conventions in Next.js. ↳
Tweet media one
31
83
988
@delba_oliveira
Delba
3 years
I'm challenging myself to recreate UI elements from around the web as a way to learn new things and keep fresh. 🍋 Here's a wip thread on what I've been building, using and learning: 🏗️ Base stack: • Next.js • @TailwindCSS • PostgreSQL and @Prisma
29
85
956
@delba_oliveira
Delba
2 years
🎥▲ Get hyped for
Tweet media one
25
21
936
@delba_oliveira
Delba
7 months
We've released an early iteration of the @nextjs learn course. Build a full-stack dashboard app while learning about the main features of Next.js 14 and the App Router. Enjoy! :)
37
104
916
@delba_oliveira
Delba
11 months
Good news! The new Next.js Docs content is now open-sourced. Contributions are welcome 🙏 ↳ Guide:
Tweet media one
20
88
886
@delba_oliveira
Delba
2 years
On Monday, we released part 1 of the Next.js Routing and Layouts RFC. Here are some small design details I'm most excited about: 1. The `root` layout replaces the need for custom `_app` and `_document` files. Reducing complexity.
Tweet media one
16
123
862
@delba_oliveira
Delba
2 years
Quick video of how I used a webhook and the new Next.js 12.1 on-demand revalidation to instantly regenerate¹ a static page and push the resulting static files to the edge. ¹ Without having to rebuild my entire site or having to wait for a set revalidation interval.
16
70
826
@delba_oliveira
Delba
4 months
I'm making a video on Partial Prerendering. What would you like to know?
45
38
749
@delba_oliveira
Delba
17 days
New Next.js e-commerce template by @blazity : ◆ Built with @v0 , @shadcn UI, and @turborepo ◆ AI (search, image captioning) ◆ Enterprise-ready (A/B testing, scalable redirects, tests, etc) ◆ And more Try it out: `npm create commerce`
8
63
612
@delba_oliveira
Delba
12 days
Seb was right. We should've called pages: "pagelet.js" 🐷😂 In Next.js, you can place shared UI inside `layout.js`. Layouts don't re-render on navigation, which reduces work on the server and the response size. But, this poses a challenge for UI that depends on URL changes.…
Tweet media one
16
57
639
@delba_oliveira
Delba
1 year
Context Providers/Consumers can have a Server component "between" them. Count is kept across navigation because the root Layout doesn't re-render. Layout (s) Provider (c) Button (c) Layout (s) Count (c) Page (s) Count (c)
12
57
545
@delba_oliveira
Delba
2 months
React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example:…
13
62
524
@delba_oliveira
Delba
1 year
Next.js Docs Update 🪄💫 Project Organization ◇ Safe file colocation by default ◇ Project organization features ◇ Project organization strategies ↳
Tweet media one
13
47
505
@delba_oliveira
Delba
2 years
We're turning developer experience up to another level with l̶o̶f̶i̶ retrowave radio 🎶 We'll handle the beats and help you dial in your flow state.
11
52
496
@delba_oliveira
Delba
24 days
🤏smol explainer: What is bundling?
11
49
490
@delba_oliveira
Delba
9 months
Next up. Looking forward to updating to include an App Router course. What kind of app should we build together?
Tweet media one
42
40
476
@delba_oliveira
Delba
3 years
Just published: How I Built My Site with Next.js. Since working on it helped me find a job, I wanted to share an overview of: ◆ The stack I used ◆ Resources I found valuable ◆ My design and content decisions Hope it's helpful! ✌️
16
53
456
@delba_oliveira
Delba
2 years
Big week for the web. @cloudflare streak of announcements¹ @netlify series D² @planetscaledata out of beta³ @remix_run goes open source on Monday⁴ @prisma data platform⁵ What an exciting time to be building for the web! 🚀
14
58
455
@delba_oliveira
Delba
1 year
Delighted to share I've been promoted 🎉 Grateful to @manovotny and @leeerob for their exceptional mentorship and support.
65
8
453
@delba_oliveira
Delba
2 years
Happy to share I've been promoted to a Senior Developer Advocate 🥳 I wrote some thoughts on the last few months: ◆ My journey into DevRel ◆ How to break into DevRel ◆ What it's like working at Vercel ◆ Lessons from the last six months ◆ What’s next
58
20
445
@delba_oliveira
Delba
3 years
📽️ Film day! 🎬 May the tech be stable, the traffic quiet and the Brazilian family not visit unannounced 🤞
Tweet media one
Tweet media two
19
11
441
@delba_oliveira
Delba
2 years
Reimagine how you build for the web. Join us on October 25th. ↳
18
41
422
@delba_oliveira
Delba
2 months
React tip: "use client" misconceptions (3/5) 🚫 "Client Components are never rendered on the server" ✅ Client Components are prerendered to HTML on the server when a user first visits a site. Let's discuss why. --- If client-side JavaScript is responsible for rendering…
11
54
447
@delba_oliveira
Delba
3 years
Some news, I'm joining the incredible team at @vercel 🖤 Vercel is a company I've admired since I started coding and who made it easy to launch my very first projects to the web. Excited to be a part of Next.js & Vercel community and looking forward to working with you all!
@leeerob
Lee Robinson
3 years
The DevRel team at @vercel is growing... Extremely excited to welcome @delba_oliveira to the team! She's an incredible engineer & educator and will be helping grow the Vercel & Next.js communities. Welcome, @delba_oliveira ! 🎉
15
17
411
41
14
422
@delba_oliveira
Delba
3 months
🎬 Script done. Animations next 🪄💫 In case I haven't covered it, what would you like to know about "use client"?
Tweet media one
23
17
401
@delba_oliveira
Delba
5 months
We updated the Server Actions docs with more examples - including how to use them outside forms, security recommendations, and best practices.
11
32
377
@delba_oliveira
Delba
5 months
We updated the testing docs and examples to use the App Router and TypeScript. Learn how to set up Next.js with these testing tools: - @vitest_dev - @jestjs_ - @Cypress_io - @playwrightweb - @TestingLib
Tweet media one
14
35
361
@delba_oliveira
Delba
1 year
😍 New `app/*/route.js` vs `pages/api/*` ◆ Colocate endpoints anywhere in nested routes ◆ Convenient HTTP verb API - GET, POST, etc ◆ Full dynamic spectrum - static/dynamic/revalidate (ISR) and even streaming
Tweet media one
@nextjs
Next.js
1 year
Introducing Route Handlers Easily define server-side API endpoints in App Router (app/) ◆ Pre-rendering / ISR support ◆ Powered by Web APIs (Request & Response) ◆ Multi-runtime (Edge & Node.js) ◆ Declarative method-based routing ◆ Streaming support
Tweet media one
37
244
2K
8
22
361
@delba_oliveira
Delba
1 year
I had the privilege of chatting with @acdlite and @sebmarkbage about React's latest features: Suspense, Streaming, Server Components, and Server Actions. We discussed what they are, how they fit together, and what the future of React might look like. ↳
Tweet media one
7
38
349
@delba_oliveira
Delba
6 years
Days 83-87 • Been playing with @MaterialUI to style my conversion tool. Also made a digital JavaScript mindmap of the things I’m learning, because my paper one was becoming too hard to edit. 🙃 #100daysofcode #codenewbie #womenwhocode
Tweet media one
18
113
337
@delba_oliveira
Delba
3 years
Hey, new Developer Advocate here. 👋 I'm curious to know... 1. Who are some exceptional people working in DevRel? 2. What companies are doing DevRel really well? 3. If you work in DevRel, what advice would you give someone starting out?
73
55
336
@delba_oliveira
Delba
6 months
It's been two weeks since we released the new Next.js course. Grateful to the 2,000+ folks who took the time to provide actionable feedback. It will significantly improve the experience for the next round of learners 🙏 Stream from the last three days:
19
19
310
@delba_oliveira
Delba
4 months
📽️ Progress Report To explain how Partial Prerendering works, it helps to explain the concept of React Boundaries. Here is an attempt at explaining Error Boundaries.
9
28
312
@delba_oliveira
Delba
2 years
One year working in DevRel at Vercel 🎉 A year of many firsts: ◆ Site: ◆ Doc: ◆ Video: ◆ Course: ◆ RFC: ◆ Virtual Conf:
22
18
300
@delba_oliveira
Delba
1 year
The Next.js TypeScript plugin is becoming sentient 🤖 It recognizes valid and invalid props to Layout components, including the new parallel routes @folder convention.
9
23
302
@delba_oliveira
Delba
3 months
tanstack-query is a best-in-class data fetching solution. It was invented just after the architecture that allowed it (hooks) was introduced. Something to consider when we look at today's React server features. First, the architecture has to allow it, then, the ecosystem cooks.
10
17
305
@delba_oliveira
Delba
3 years
Tweet media one
5
8
292
@delba_oliveira
Delba
2 years
New site. New domain. New article. Just in time for React Conf in 20 minutes where I link to the new domain in a talk 😅
Tweet media one
27
6
292
@delba_oliveira
Delba
4 months
📑 Next.js Docs: The different ways you can redirect in your app, and use cases. Includes an example of how to manage thousands of redirects for large-scale applications. ⬩Docs: ⬩Demo: ⬩Example:
Tweet media one
6
24
292
@delba_oliveira
Delba
11 months
Shipped a nifty @Github action for the Next.js Docs - a broken link detector 🔎 After a few days of painfully fixing broken links 💀 I wrote a script that would prevent site builds if broken links were found 😈 But, for better DX, it now alerts you on the PR 😇
Tweet media one
13
8
289
@delba_oliveira
Delba
9 months
View Transitions are really cool 🤩 I think it'd be a nice addition to the sidebar of doc sites that use Astro. Amazing ship by the Astro team 👏 Check out this implementation by @joebell_
@joebell_
Joe Bell
9 months
Playing around with @astrodotbuild 's experimental support for View Transitions – it's a thing of beauty ✨
27
83
910
0
20
290
@delba_oliveira
Delba
1 year
We’ll be thinking about this for the next few years.
Tweet media one
16
10
284
@delba_oliveira
Delba
2 years
Lately, I've been thinking about how we, as frontend developers, are perfectly positioned to create more effective learning experiences through "interactive playgrounds". What are some of the absolute best interactive articles and docs you've seen around the web? I'll start 🧵
@reactjs
React
2 years
Join @delba_oliveira ’s talk “Interactive playgrounds with React” to see how you can create rich documentation experiences with React and MDX
3
2
40
29
38
282
@delba_oliveira
Delba
11 months
Next.js Update Our top priorities for the next couple of months: ※ Improving Local, Build, and Production Performance ※ Polishing bugs and unexpected behavior ※ Developer Education on new Next.js and React features ↳
Tweet media one
11
16
278
@delba_oliveira
Delba
2 months
Currently working on clarifying authentication patterns in @nextjs . Let's chat:
Tweet media one
4
21
273
@delba_oliveira
Delba
1 year
Next.js Docs Meta Update 🧹🌿 ◇ Search added to home page @raunofreiberg ◇ Search now has app/pages filter @manovotny ◇ Diagrams are more color-blind friendly @oyaaaaaaaasumi ◇ New feedback component on doc pages @emilkowalski_
13
27
269
@delba_oliveira
Delba
3 years
Coming soon to a jest.config.js file near you.
Tweet media one
@timneutkens
Tim
3 years
Next.js has a built-in configuration for Jest now! ◆ Auto-mocking of .(s)css/.module.(s)css and image imports ◆ Transform using SWC ◆ Loads .env variants ◆ Ignores node_modules for transforms / test resolving Available as experimental on canary:
Tweet media one
10
98
747
7
23
262
@delba_oliveira
Delba
3 years
gm. My #nextjsconf talks on Getting Started with React and Next.js are up. I tried to make them approachable by building on concepts step-by-step as we go from plain JavaScript to React to Next.js 🐣 JS → React: React → Next:
Tweet media one
14
22
249
@delba_oliveira
Delba
1 year
Next.js Cache is bringing ISR to the component level. Gen 1 - Decide between static and dynamic per app. Gen 2 - Decide per page. Gen 3 - Decide per fetch. It's not either/or – it's a dynamic spectrum 🪄💫
@vercel
Vercel
1 year
Next.js 13.2 ◆ Built-in SEO with Metadata API ◆ Route Handlers ◆ MDX for Server Components ◆ Rust MDX Parser ◆ Statically Typed Links ◆ Next.js Cache ◆ Turbopack Improvements
53
399
2K
6
25
252
@delba_oliveira
Delba
5 months
We updated the Next.js Foundations course to include the App Router and Server Components. Great for those who are new to React or just want a refresher 😊
9
42
245
@delba_oliveira
Delba
1 year
Last week (an eternity ago), we announced some Next.js updates. ◆ App Router: Beta → Stable ◆ Turbopack: Alpha → Beta ◆ React Server Actions in Next.js: 💡 → Alpha Plus, we managed to capture a @nutlope in its natural habitat: shipping viral AI projects.
11
17
239
@delba_oliveira
Delba
28 days
"use client" is a bundling feature not specific to React Components. For example, `abc` is a simple numeric value defined in a client module and imported into a server module. What do we expect `abc` to log in each environment?
4
29
246
@delba_oliveira
Delba
25 days
Edge Rendering vs. Server Rendering (when rendering depends on data far from the Edge).
@leeerob
Lee Robinson
26 days
So, @vercel reverted all edge rendering back to Node.js 😬 Wanted to correct the record here as it's something I've advocated for in the past, and share what I've learned since then. Also, the "edge" naming has been a bit confusing, so let's clear that up here as well. What is…
113
207
2K
11
14
210
@delba_oliveira
Delba
3 months
🏳️ weekend tinkering did not go well 😅
10
2
204
@delba_oliveira
Delba
2 years
When we started rewriting the Next.js docs, we couldn't imagine 2̶0̶0̶0̶ 3,000+ of you would be there to give feedback 🙏 So far, you've helped us find typos and bad links, answered each other's questions, and helped us identify "hot zones" that need more clarity. Thank you!
@vercel
Vercel
2 years
We enabled public comments for the Next.js app directory docs (beta). 2,286 have contributed feedback so far. Learn how to enable collaboration on your UI.
2
6
97
7
18
198
@delba_oliveira
Delba
3 years
A lot of work has been happening behind the scenes for #nextjsconf . Really excited about what we're going to be sharing! If you're new to React and/or Next, you won't want to miss it 😉 Grab your ticket and join me on October 26! 👇
6
4
189
@delba_oliveira
Delba
3 years
My first video is out: How I Built the Portfolio That Helped Me Land a Developer Role. — In the last few days, I've been learning how to use lights, mics, edit videos... and be comfortable in front of the camera. It's been intense but extremely fun 🚀
18
17
175
@delba_oliveira
Delba
2 years
Monumental Sunday project: Updated my favicon 💪💪💪 Depending on your sites style, it might be cool to add a teeny weeny bit of character to your favicon by using this¹ Figma plugin to create a Squircle.
Tweet media one
12
3
175
@delba_oliveira
Delba
3 years
Good news everyone! I'll be speaking at React Conf 2021 💙 Honored to be part of this event and looking forward to hearing from all the other speakers. Grab your tickets 👇
16
5
172
@delba_oliveira
Delba
2 years
5️⃣ Finishing touches Hide the overlay while it's positioned outside the skeleton. (Optional) Add a white border to the top of the overlay to simulate light reflecting on the top of the skeleton. Code:
8
5
164
@delba_oliveira
Delba
3 years
New video: My Story + How I Became a Developer 👩🏻‍💻 — How I dropped out of med school, left home and moved countries at 18, and eventually learned to code. It spans 3 countries and a decade, there were some detours but I eventually found my career path ☺️
Tweet media one
12
12
156
@delba_oliveira
Delba
11 months
@robbkuhn @nextjs @vercel Hey, you can use the react dev tools to manually trigger suspense/error boundaries:
@delba_oliveira
Delba
1 year
TIL you can toggle Suspense boundaries in React Dev Tools for easy debugging. Useful for making sure your loading skeletons line up with your real content. h/t @sebmarkbage ✌️
18
140
1K
6
7
156
@delba_oliveira
Delba
2 months
I still hate it, but it's getting there.
6
3
154
@delba_oliveira
Delba
2 years
Next.js 13 and Server Components introduce a new model for building web applications. It allows you to combine the rich interactivity of client-side apps with the improved performance of server rendering. Try it out today:
@nextjs
Next.js
2 years
Next.js 13 ◆ Layouts ◆ React Server Components w/ Streaming ◆ Component-based Data Fetching & Caching ◆ Turbopack: the Rust-based Webpack successor ◆ Improved `next/image` ◆ @next /font
87
994
4K
2
15
152
@delba_oliveira
Delba
3 months
🎥 Thinking about my next video. What Next.js or React concept would you like explained?
54
2
148
@delba_oliveira
Delba
2 years
We're working on documentation and demos that help explain these new concepts and their possibilities. As always, features will be incrementally adoptable, and backwards compatible. Read more in the RFC: .
3
4
143
@delba_oliveira
Delba
9 months
Peek under the hood of Next.js with @samselikoff and @timneutkens ◇ Rendering Server Components ◇ Composition vs. top-down data flow ◇ Caching layers ◇ Revalidation ◇ After user events ◇ After server-side changes ◇ Back/forward navigation ↳
Tweet media one
1
13
138
@delba_oliveira
Delba
5 months
Some thoughts on the ongoing "use client" naming is bad conversation. IMO, the root problem is the general misconception around the term Server Side Rendering (SSR) in React apps. This naming paints SSR as an alternative to CSR when, in reality, it is an optional step to show…
18
15
131
@delba_oliveira
Delba
3 years
01: Inspired by @Vercel 's iconic "Develop. Preview. Ship" hero text. I recreated a component that takes a set of given words and animates them line by line.
3
5
127
@delba_oliveira
Delba
10 months
Last week we shared our focus on performance. Here is the first update of that effort. More soon. Try upgrading and let us know 🙏 🥂 to the Next.js team
@nextjs
Next.js
10 months
Next.js 13.4.8 includes improvements for compiler performance and various bug fixes. On Vercel​.com, this led to 1.5x faster local server startup and 54% faster updates when making changes (HMR / React Fast Refresh). Here are the changes we've made to improve performance ↓ ◆…
104
231
2K
5
4
123
@delba_oliveira
Delba
2 years
Back at it. Recharged, recalibrated, and eager to get started. I spent some time thinking about some personal goals for the year.
Tweet media one
4
1
121
@delba_oliveira
Delba
2 years
@lukemorales It's beautiful 😍 You forgot loading and not-found though. In all seriousness, you will not use every special file at every level. E.g. layout + page in leaves is redundant, templates will be rare, and most routes do not need error/loading boundaries at that level of granularity
1
2
120
@delba_oliveira
Delba
1 year
It's great news for the React Ecosystem to see both @remix_run ¹ and @redwoodjs ² exploring React Server Components. We'll all benefit from seeing Redwood's laser-focused take and having the best educators in the industry address the topic.
5
6
118
@delba_oliveira
Delba
1 year
Turbopack Fast Refresh 🤝 Autosave files on keystroke
@padmaia
Maia Teegarden
1 year
Turbopack is getting close to beta! We're nearly done with Next.js features and focusing on stability. We've also been investing in features to aid adoption, like supporting webpack loaders. Try it out and let us know your feedback!
22
101
1K
4
8
116
@delba_oliveira
Delba
2 years
Making diagrams for Husband walks in: "Maybe save the trees and use @Figma ?" 😅🌳 But seriously, what are some web concepts you hear us talking about in @nextjs that you'd like explained? "Compiling", "code splitting", "edge" - no answer is too simple.
Tweet media one
14
0
113
@delba_oliveira
Delba
3 years
Spent some time this weekend playing around with @figmadesign to create slides for a talk. Components and auto layout make up for a lack of native presentation features. Anyway, here are some plugins I found useful: 1. Quickly create mesh gradients:
Tweet media one
4
6
108
@delba_oliveira
Delba
3 years
We made a lil' mixtape for ya 😘 Join me at right now for some sick beatz while we wait. The first person to reply with the easter egg wins some swag.
11
6
110
@delba_oliveira
Delba
3 years
My #nextjsconf swag arrived 🤩 I was excited about this drop because all proceeds are going to @WomenWhoCode . Got yours? Would love to see your flex pics. And thank you for supporting #womenwhocode 🙏
Tweet media one
2
3
104
@delba_oliveira
Delba
2 years
Great demo on the new app directory and using it with Vercel Monitoring by @steph_dietz_ @steventey and @manovotny
Tweet media one
3
4
105
@delba_oliveira
Delba
3 years
🔴 Another film day: My Story + How I Became a Developer. May the takes be few, the words flow, and the neighbours postpone their lawn mowing plans.
Tweet media one
Tweet media two
12
2
103
@delba_oliveira
Delba
3 years
03: Link previews created with @microlinkhq and @radix_ui . I first saw this component on @raunofreiberg 's 👈 check it out, it's a nice website 🖤
5
9
102