Aurora Scharff's banner

Aurora Scharff

@aurorascharff • 5,835 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,224 görüntüleme

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,082 görüntüleme

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 görüntüleme

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,904 görüntüleme

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

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

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

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.

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.

67,512 görüntüleme • 5 ay önce

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.

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.

29,990 görüntüleme • 5 ay önce

Daha fazla içerik yok.