Delba
@delba_oliveira
Followers
43K
Following
12K
Media
332
Statuses
3K
DX Engineer @nextjs at @vercel ▲ learn: https://t.co/dU89HxKvSS docs: https://t.co/z6f0YT8kke videos: https://t.co/afwj55jtRs
Joined August 2017
I’m exploring a new video series to visually explain Next.js and React concepts. Open to feedback 🖤. Episode 1: Next.js Filesystem Routing
212
299
4K
Playing with React's <ViewTransition> for cross-page animations in Next.js. It's early and experimental, but very cool!. Two tips:.• Use a poor man's motion blur for movement `filter: blur(0->10->0)`.• Use Chrome's animations devtools to debug
62
250
4K
Light reflection. But make it UI. Here's an idea for your loading skeletons. Let's create a shimmer animation with @tailwindcss ✨
51
307
3K
Next.js 15.3: useLinkStatus. Define inline feedback to show while navigations complete. Tip:.• Avoid an unnecessary flicker of pending UI on fast loads by adding an initial animation delay (e.g. 100ms) and fading in from 0 opacity.
56
281
3K
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_ ✨
52
243
2K
Next.js Explained: Partial Prerendering. What exactly is Partial Prerendering? How does it work? And most importantly, why does it matter?
115
296
2K
Next.js: Authentication. ※ Best practices for Server Components, Server Actions, and Middleware.※ Patterns like Data Access Layers, API Minimization, and Data Transfer Objects. Also, aside from headshots, this video is entirely built in React 🤯
55
164
2K
React 19.
26
87
2K
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.
29
209
1K
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:
36
87
1K
The flight tracker demo we used at Next.js Conf is now open source.
13
64
1K
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.
41
163
1K
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
120
1K
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
203
1K
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 ✌️
15
133
1K
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:
40
156
1K
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.
25
156
1K
Next.js 15.2 (canary preview): Node.js middleware. The quest to fully support Node.js in middleware continues. You can now configure `middleware.js` to use the Node.js runtime. This means you can use any node module or npm package in your middleware.
21
78
1K
Shipped a new Next.js Docs Page!. Project Structure: An overview of all the file and folder conventions in Next.js. ↳
28
81
955
Next.js 15: <Form>.• Prefetching.• Client-side navigation.• Progressive enhancement. It is useful for forms that navigate to a new page, such as a search form that leads to a results page.
17
89
979
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.
27
86
924
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! :) .
36
97
890
Good news! The new Next.js Docs content is now open-sourced. Contributions are welcome 🙏. ↳ Guide:
20
85
854
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.
16
120
840
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.
15
68
792
Next.js 15.2: Streaming Metadata. The quest to show UI to the user as fast as possible continues: async `generateMetadata` is now non-blocking and is streamable. This means fast initial UI can be sent to the browser even before `generateMetadata` has completed.
15
65
803
I often get asked how I make code animations. Here is a great way to get started: Markdown on the left gets you Video output on the right 🤯. Powered by two of my favorite tools: Code Hike and Remotion. Created by @pomber 🖤
11
51
739
I'm making a video on Partial Prerendering. What would you like to know?
43
37
726
Come work with me 😊. We’re looking for a DX Engineer who loves working with @nextjs. Day-to-day, you’ll be mostly coding and writing:. Code.• Improve and maintain the Next.js site (/docs, /learn, and /blog), which receives millions of monthly visitors. • Build examples and.
43
64
713
Next.js file-based Metadata: Favicons. 🤏 Drop a `favicon.ico` file into the `/app` folder and Next.js will automatically generate the correct `<head>` metadata for you.
21
52
707
Next.js 15.1: Easier error debugging. ✓ Hide¹ stack frames for dependency code.✓ Surface source of the error in your code. Video: Terminal output² of a Zod parsing error
19
48
665
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.
17
54
635
Next.js 15 RC: `after()`. Perform secondary tasks after responding to the user so they don't have to wait. Available in Server Components, Server Actions, Middleware, and Route Handlers.
23
55
618
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`
7
61
621
A component becomes a Server Component when imported into the server environment. Not because it:.❌ has an async keyword¹.❌ doesn't have “use client”².❌ doesn't use hooks³.❌ has “use server”⁴.❌ Server components are the default⁵. So, how are Server Components defined?
14
62
618
<AnimatedIDE /> has been achieved internally. Also, "App Router + Authentication best practices" video coming later this week.
13
32
602
Next.js 15.3: `next build --turbopack` (alpha). Although some projects may see build speed improvements, the focus of this release is broader adoption to help surface any remaining issues before stabilizing. More optimizations are coming soon.
21
30
614
Next.js file-based Metadata: `icon`. Add an `icon` file to the app folder and Next.js will generate the correct `<head>` metadata. Use:.• Image files (.svg .jpg .png).• Code (.js .tsx) and Next.js APIs to generate an icon e.g. change color based on the current environment
11
47
584
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:
12
71
562
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
525
Peace has been achieved internally. If I haven't replied to you lately. sorry 🙏
28
5
495
Next.js Docs Update 🪄💫. Project Organization.◇ Safe file colocation by default.◇ Project organization features.◇ Project organization strategies. ↳
13
45
488
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
50
483
Next up. Looking forward to updating to include an App Router course. What kind of app should we build together?
40
37
457
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! ✌️.
15
48
439
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
10
56
445
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! 🚀.
13
57
437
Delighted to share I've been promoted 🎉. Grateful to @manovotny and @leeerob for their exceptional mentorship and support.
61
8
438
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
60
22
430
📽️ Film day! 🎬. May the tech be stable, the traffic quiet and the Brazilian family not visit unannounced 🤞
18
11
426
Reimagine how you build for the web. Join us on October 25th. ↳
16
35
405
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!.
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! 🎉
38
14
410
🎬 Script done. Animations next 🪄💫. In case I haven't covered it, what would you like to know about "use client"?
23
17
396
See you soon ▲. The adjustments load in as the badge is flying around 🤯
12
11
393
We updated the Server Actions docs with more examples - including how to use them outside forms, security recommendations, and best practices.
11
29
360
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. ↳
13
32
347
😍 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
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.
8
21
350
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. ↳
6
33
336
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
18
111
322
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?.
64
49
317
Playing around with 'use cache' for a new guide I'm working on. Put together some basic examples at the route, component, and function level. Also gave the playground a glow-up: tweaked the design, added Geist and images, and the gradient borders are finally out, sooo 2022 💁♀️
8
16
330
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
18
301
📽️ 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
27
304
The Next.js TypeScript plugin is becoming sentient 🤖. It recognizes valid and invalid props to Layout components, including the new parallel routes @folder convention.
8
22
284
One year working in DevRel at Vercel 🎉. A year of many firsts:. ◆ Site: ◆ Doc: ◆ Video: .◆ Course: ◆ RFC: ◆ Virtual Conf:
22
17
290
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
15
299
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 😇
12
8
284
📑 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:
6
24
278
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_.
Playing around with @astrodotbuild's experimental support for View Transitions – it's a thing of beauty ✨
0
18
280
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 😅.
26
6
278
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 🧵.
Join @delba_oliveira’s talk “Interactive playgrounds with React” to see how you can create rich documentation experiences with React and MDX
27
39
273
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. ↳
11
16
269
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
26
256
Vercel Web Analytics, now:. • Up to 20× more included events.• Up to 80% cheaper for additional events
14
7
265
Coming soon to a jest.config.js file near you.
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:
7
22
251
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:
14
22
248
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 🪄💫.
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.
6
23
239
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 😊.
8
40
237
"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
28
240
Vercel: Recent price reductions. Underlying infrastructure improvements → Customer savings
Recent Vercel price drops:.🆕 ~50% off intl. Fast Data Transfer⁰.✅ ~85% off Functions → Fluid¹.✅ ~87% off Monitoring → Observability².✅ ~50% off Domains³.✅ ~75% off Log Drains⁴.✅ ~65% off ISR read/writes⁵.✅ Lower Image Optimization pricing⁶.🔜 More self-serve products.
2
10
245
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.
10
15
228
Curated Next.js 13 content from the community to help you get started. Nested layouts by example by @samselikoff.
6
36
221
Edge Rendering vs. Server Rendering (when rendering depends on data far from the Edge).
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.
10
14
200