Aurora Scharff's banner
Aurora Scharff's profile picture

Aurora Scharff

@aurorascharff • 5,938 subscribers

DX, Docs & Education @nextjs ▲ @vercel | React Cert Lead @CertificatesDev

Shorts

Someone told me I should have a click highlighter for my live demos. So I vibe coded one in 10 minutes with OpenAI Developers Codex. Meet ClickLight! Wild that we can just build this stuff now. Grab it below ↓

Someone told me I should have a click highlighter for my live demos. So I vibe coded one in 10 minutes with OpenAI Developers Codex. Meet ClickLight! Wild that we can just build this stuff now. Grab it below ↓

101,635 Aufrufe

Building SPA-like experiences with Next.js With 𝚌𝚊𝚌𝚑𝚎𝙲𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜, the data behind a page can persist across navigations, so a revisit skips the loading fallback. Mark the read with '𝚞𝚜𝚎 𝚌𝚊𝚌𝚑𝚎' so its result is cached instead of re-queried on each render. That cache also persists in the browser, so revisiting the page reuses it without hitting the server again. Live demo, source code, and docs below ↓

Building SPA-like experiences with Next.js With 𝚌𝚊𝚌𝚑𝚎𝙲𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜, the data behind a page can persist across navigations, so a revisit skips the loading fallback. Mark the read with '𝚞𝚜𝚎 𝚌𝚊𝚌𝚑𝚎' so its result is cached instead of re-queried on each render. That cache also persists in the browser, so revisiting the page reuses it without hitting the server again. Live demo, source code, and docs below ↓

29,329 Aufrufe

Building SPA-like experiences with Next.js (6) You can lose connection mid-session and your app waits it out, then picks back up the moment you reconnect. With the experimental (!) 𝚞𝚜𝚎𝙾𝚏𝚏𝚕𝚒𝚗𝚎 flag, a failed navigation, fetch, or Server Action stays pending instead of throwing, then retries automatically. The 𝚞𝚜𝚎𝙾𝚏𝚏𝚕𝚒𝚗𝚎() hook lets you show a reconnecting bar while it waits. Because Partial Prefetching keeps the App Shell on the client, you always have something to show offline. And, if a route's content was prefetched, that's available too. Live demo, source code, and docs below ↓

Building SPA-like experiences with Next.js (6) You can lose connection mid-session and your app waits it out, then picks back up the moment you reconnect. With the experimental (!) 𝚞𝚜𝚎𝙾𝚏𝚏𝚕𝚒𝚗𝚎 flag, a failed navigation, fetch, or Server Action stays pending instead of throwing, then retries automatically. The 𝚞𝚜𝚎𝙾𝚏𝚏𝚕𝚒𝚗𝚎() hook lets you show a reconnecting bar while it waits. Because Partial Prefetching keeps the App Shell on the client, you always have something to show offline. And, if a route's content was prefetched, that's available too. Live demo, source code, and docs below ↓

17,420 Aufrufe

React’s new 𝚋𝚛𝚘𝚠𝚜𝚎𝚛() API marks a component as browser-only during server rendering. Here, 𝚞𝚜𝚎(𝚋𝚛𝚘𝚠𝚜𝚎𝚛()) suspends on the server before reading a saved draft from 𝚕𝚘𝚌𝚊𝚕𝚂𝚝𝚘𝚛𝚊𝚐𝚎 in the browser. What else would you use it for?

React’s new 𝚋𝚛𝚘𝚠𝚜𝚎𝚛() API marks a component as browser-only during server rendering. Here, 𝚞𝚜𝚎(𝚋𝚛𝚘𝚠𝚜𝚎𝚛()) suspends on the server before reading a saved draft from 𝚕𝚘𝚌𝚊𝚕𝚂𝚝𝚘𝚛𝚊𝚐𝚎 in the browser. What else would you use it for?

11,413 Aufrufe

I was clicking through Astryx from Meta's docs, and noticed it felt kind of slow to navigate. It's a docs site that should be fully static, but every route was rendering on the server on each request. We've been building a skill to migrate apps to Cache Components, so I wanted to see if it could help. I ran 𝚗𝚎𝚡𝚝-𝚌𝚊𝚌𝚑𝚎-𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜-𝚊𝚍𝚘𝚙𝚝𝚒𝚘𝚗, and Instant Insights showed the agent exactly what to cache. The skill completed the entire migration on its own, even though Astryx was still on Next.js 15. Now navigation is instant, up to 3x faster. Skill, PR, and performance details below ↓

I was clicking through Astryx from Meta's docs, and noticed it felt kind of slow to navigate. It's a docs site that should be fully static, but every route was rendering on the server on each request. We've been building a skill to migrate apps to Cache Components, so I wanted to see if it could help. I ran 𝚗𝚎𝚡𝚝-𝚌𝚊𝚌𝚑𝚎-𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜-𝚊𝚍𝚘𝚙𝚝𝚒𝚘𝚗, and Instant Insights showed the agent exactly what to cache. The skill completed the entire migration on its own, even though Astryx was still on Next.js 15. Now navigation is instant, up to 3x faster. Skill, PR, and performance details below ↓

11,977 Aufrufe

Videos

LIVE
1.2k

Anya Rossi

sweetdream.ai

SweetDream.aiSponsored•Livecam
Streaming Now

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

HD live stream
Exclusive private shows
1.2k viewers online

Free preview available • Premium content

I rebuilt an older Vercel book search demo with Next.js 16.3 Instant Navigations: Instant Navigations lets server-rendered routes respond immediately when you click, even on a throttled connection: 𝚌𝚘𝚗𝚜𝚝 𝚗𝚎𝚡𝚝𝙲𝚘𝚗𝚏𝚒𝚐 = { 𝚌𝚊𝚌𝚑𝚎𝙲𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜: 𝚝𝚛𝚞𝚎, 𝚙𝚊𝚛𝚝𝚒𝚊𝚕𝙿𝚛𝚎𝚏𝚎𝚝𝚌𝚑𝚒𝚗𝚐: 𝚝𝚛𝚞𝚎 }; Cache Components prerenders static, cached, and fallback UI. Partial Prefetching brings that reusable route UI to the browser before navigation. Add 𝚙𝚛𝚎𝚏𝚎𝚝𝚌𝚑={𝚝𝚛𝚞𝚎} when a link should also resolve its URL-dependent content before the click. Anything still missing loads on the server and streams into its Suspense boundary. The filters use 𝚞𝚜𝚎𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗 to fade the catalog while the server updates and 𝚞𝚜𝚎𝙾𝚙𝚝𝚒𝚖𝚒𝚜𝚝𝚒𝚌 to apply the next filter values immediately. Rebuilding the demo also improved initial loading. First Contentful Paint was 44% faster and Largest Contentful Paint was 33% faster than the original. See the source and learn more below ↓
0:27
aurorascharff's profile picture

I rebuilt an older Vercel book search demo with Next.js 16.3 Instant Navigations: Instant Navigations lets server-rendered routes respond immediately when you click, even on a throttled connection: 𝚌𝚘𝚗𝚜𝚝 𝚗𝚎𝚡𝚝𝙲𝚘𝚗𝚏𝚒𝚐 = { 𝚌𝚊𝚌𝚑𝚎𝙲𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜: 𝚝𝚛𝚞𝚎, 𝚙𝚊𝚛𝚝𝚒𝚊𝚕𝙿𝚛𝚎𝚏𝚎𝚝𝚌𝚑𝚒𝚗𝚐: 𝚝𝚛𝚞𝚎 }; Cache Components prerenders static, cached, and fallback UI. Partial Prefetching brings that reusable route UI to the browser before navigation. Add 𝚙𝚛𝚎𝚏𝚎𝚝𝚌𝚑={𝚝𝚛𝚞𝚎} when a link should also resolve its URL-dependent content before the click. Anything still missing loads on the server and streams into its Suspense boundary. The filters use 𝚞𝚜𝚎𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗 to fade the catalog while the server updates and 𝚞𝚜𝚎𝙾𝚙𝚝𝚒𝚖𝚒𝚜𝚝𝚒𝚌 to apply the next filter values immediately. Rebuilding the demo also improved initial loading. First Contentful Paint was 44% faster and Largest Contentful Paint was 33% faster than the original. See the source and learn more below ↓

Aurora Scharff

56,397 Aufrufe • vor 1 Monat

View Transitions just got simpler with Next.js 16.2. <𝙻𝚒𝚗𝚔> now has a 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚃𝚢𝚙𝚎𝚜 prop. Tag your navigation with a type, and <𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗> picks the right animation.
0:38
aurorascharff's profile picture

View Transitions just got simpler with Next.js 16.2. <𝙻𝚒𝚗𝚔> now has a 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚃𝚢𝚙𝚎𝚜 prop. Tag your navigation with a type, and <𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗> picks the right animation.

Aurora Scharff

67,535 Aufrufe • vor 7 Monaten

Next.js 16.3 Instant Navigations lets you balance reusable content with fresh or personalized data while keeping navigation responsive, like a SPA. I built to try this in a common multi-step flow. Cache Components mark reusable flight data with 𝚞𝚜𝚎 𝚌𝚊𝚌𝚑𝚎. Partial Prefetching brings it into the browser before you click, including URL-specific content with 𝚙𝚛𝚎𝚏𝚎𝚝𝚌𝚑={𝚝𝚛𝚞𝚎}. Async React keeps search and booking actions responsive with 𝚞𝚜𝚎𝙾𝚙𝚝𝚒𝚖𝚒𝚜𝚝𝚒𝚌, 𝚜𝚝𝚊𝚛𝚝𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗, and 𝚞𝚜𝚎𝙰𝚌𝚝𝚒𝚘𝚗𝚂𝚝𝚊𝚝𝚎. Server Functions write and refresh data with 𝚞𝚙𝚍𝚊𝚝𝚎𝚃𝚊𝚐. 𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗 animates loading and confirmation. I’m also testing 𝚞𝚗𝚜𝚝𝚊𝚋𝚕𝚎_𝚙𝚛𝚎𝚏𝚎𝚝𝚌𝚑() and 𝚞𝚗𝚜𝚝𝚊𝚋𝚕𝚎_𝚗𝚊𝚟𝚒𝚐𝚊𝚝𝚒𝚘𝚗() to refine what waits for navigation, like search results and live seat availability. See the source and learn more below ↓
0:25
aurorascharff's profile picture

Next.js 16.3 Instant Navigations lets you balance reusable content with fresh or personalized data while keeping navigation responsive, like a SPA. I built to try this in a common multi-step flow. Cache Components mark reusable flight data with 𝚞𝚜𝚎 𝚌𝚊𝚌𝚑𝚎. Partial Prefetching brings it into the browser before you click, including URL-specific content with 𝚙𝚛𝚎𝚏𝚎𝚝𝚌𝚑={𝚝𝚛𝚞𝚎}. Async React keeps search and booking actions responsive with 𝚞𝚜𝚎𝙾𝚙𝚝𝚒𝚖𝚒𝚜𝚝𝚒𝚌, 𝚜𝚝𝚊𝚛𝚝𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗, and 𝚞𝚜𝚎𝙰𝚌𝚝𝚒𝚘𝚗𝚂𝚝𝚊𝚝𝚎. Server Functions write and refresh data with 𝚞𝚙𝚍𝚊𝚝𝚎𝚃𝚊𝚐. 𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗 animates loading and confirmation. I’m also testing 𝚞𝚗𝚜𝚝𝚊𝚋𝚕𝚎_𝚙𝚛𝚎𝚏𝚎𝚝𝚌𝚑() and 𝚞𝚗𝚜𝚝𝚊𝚋𝚕𝚎_𝚗𝚊𝚟𝚒𝚐𝚊𝚝𝚒𝚘𝚗() to refine what waits for navigation, like search results and live seat availability. See the source and learn more below ↓

Aurora Scharff

11,055 Aufrufe • vor 1 Monat

I've been using React's throughout my Next.js SPA series to make the demos smoother and more alive. Here are the patterns I use most: 1. Suspense reveals 2. Morphing content into place 3. Page transitions See each pattern, plus the guide and Skill ↓
0:34
aurorascharff's profile picture

I've been using React's throughout my Next.js SPA series to make the demos smoother and more alive. Here are the patterns I use most: 1. Suspense reveals 2. Morphing content into place 3. Page transitions See each pattern, plus the guide and Skill ↓

Aurora Scharff

19,880 Aufrufe • vor 2 Monaten

A Next.js feature I think more devs should know about: 𝚝𝚢𝚙𝚎𝚍𝚁𝚘𝚞𝚝𝚎𝚜: 𝚝𝚛𝚞𝚎 PageProps auto-types your params and searchParams. Route<T> catches broken links at build time.
0:25
aurorascharff's profile picture

A Next.js feature I think more devs should know about: 𝚝𝚢𝚙𝚎𝚍𝚁𝚘𝚞𝚝𝚎𝚜: 𝚝𝚛𝚞𝚎 PageProps auto-types your params and searchParams. Route<T> catches broken links at build time.

Aurora Scharff

29,990 Aufrufe • vor 7 Monaten

Keine weiteren Inhalte verfügbar