iiinova — where your digital self keeps evolving

3. Page transitions Add transition types to navigation, then map each type to an animation on the content that changes. In Flow, this slides calendar pages in the matching direction when navigating forward and back. Source: github.com/aurorascharf...

100

2. Morph content into place Wrap each moving part in a <𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗>. Update the list in a Transition and React animates each into place. In Next Beats, I animate favorite and playlist lists as they grow or shrink, and the content below. Source: github.com/vercel-labs/...

1. Suspense reveals Wrap streamed content in a <𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗>. It fades in when Suspense replaces the skeleton. In Drop, I use this to fade in the feed, posts, and replies as their Suspense boundaries resolve. Source: github.com/aurorascharf...

100

Aurora Scharff @aurorascharff.no · 11/08/2026

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 ↓

2303

Building SPA-like experiences with Next.js (10) With Instant Navigations in Next.js 16.3, you can fetch data on the server and still build highly interactive apps. Add SWR or React Query when you need polling, focus revalidation, or optimistic updates across components. Live demo and docs below ↓

190

Aurora Scharff @aurorascharff.no · 10/08/2026

Building SPA-like experiences with Next.js (9) With Instant Navigations in Next.js 16.3, you can build complex, authenticated apps that feel like SPAs while still rendering and fetching data on the server. Live demo, source code, and docs below ↓

180

Aurora Scharff @aurorascharff.no · 07/08/2026

Building SPA-like experiences with Next.js (8) With Async React features like transitions and optimistic updates, you can give any action immediate feedback, however slow the network is. Live demo, source code, and docs below ↓

160

Aurora Scharff @aurorascharff.no · 05/08/2026

Building SPA-like experiences with Next.js (7) With Suspense, you can stream your page in so it loads fast (LCP) and stays stable (CLS). <𝚂𝚞𝚜𝚙𝚎𝚗𝚜𝚎 𝚏𝚊𝚕𝚕𝚋𝚊𝚌𝚔={<𝙿𝚘𝚜𝚝𝚂𝚔𝚎𝚕𝚎𝚝𝚘𝚗 />}> <𝙿𝚘𝚜𝚝 /> <𝚂𝚞𝚜𝚙𝚎𝚗𝚜𝚎 𝚏𝚊𝚕𝚕𝚋𝚊𝚌𝚔={<𝚁𝚎𝚙𝚕𝚒𝚎𝚜𝚂𝚔𝚎𝚕𝚎𝚝𝚘𝚗 />}> <𝚁𝚎𝚙𝚕𝚒𝚎𝚜 /> </𝚂𝚞𝚜𝚙𝚎𝚗𝚜𝚎> </𝚂𝚞𝚜𝚙𝚎𝚗𝚜𝚎>

1110

Aurora Scharff @aurorascharff.no · 04/08/2026

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. Live demo, source code, and docs below ↓

2160

Aurora Scharff @aurorascharff.no · 24/07/2026

Building SPA-like experiences with Next.js (5) You can keep your data cached and still see your own changes the moment you make them. Live demo, source code, and docs below ↓

3130

Aurora Scharff @aurorascharff.no · 23/07/2026

Building SPA-like experiences with Next.js (4) Server Components keep your app fast with data on the server and less JavaScript, but you can still build fully interactive apps. Live demo, source code, and docs below ↓

160

Aurora Scharff @aurorascharff.no · 22/07/2026

Building SPA-like experiences with Next.js (3) With Partial Prefetching, you can tap a link and the page arrives with its content already there. Live demo, source code, and docs below ↓

2352

Aurora Scharff @aurorascharff.no · 21/07/2026

Building SPA-like experiences with Next.js With 𝚌𝚊𝚌𝚑𝚎𝙲𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜, the data behind a page can persist across navigations, so a revisit skips the loading fallback. Live demo, source code, and docs below ↓

1250

Aurora Scharff @aurorascharff.no · 20/07/2026

Building SPA-like experiences with Next.js With Instant Navigations, you can click around and the next page is there right away, the way a single-page app feels. Live demo, source code, and docs below ↓

1290

Aurora Scharff @aurorascharff.no · 18/07/2026

Doing some Saturday coding and remembered this neat trick: if you use file-based routing, custom editor labels put the folder name in front of 𝚙𝚊𝚐𝚎.𝚝𝚜𝚡 so you can actually tell your files apart. Next.js App directory example, full config below ↓

2120

Aurora Scharff @aurorascharff.no · 17/07/2026

Instant Insights showed the agent what to cache, and it migrated the site on its own, even though Astryx was still on Next.js 15. Here are the warm-median TTFB results per route.

Aurora Scharff @aurorascharff.no · 17/07/2026

I was clicking through astryx.atmeta.com, Meta's design system docs, and noticed it felt kinda slow to navigate. It's a docs site that should be static, but routes rendered on the server. I wanted to see if our 𝚗𝚎𝚡𝚝-𝚌𝚊𝚌𝚑𝚎-𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜-𝚊𝚍𝚘𝚙𝚝𝚒𝚘𝚗 skill could help. Now it's instant, up to 3x faster ↓

2100

Aurora Scharff @aurorascharff.no · 10/07/2026

Im playing around with an internal agent tool for visualizing stuff, hows this?

During a Transition, React avoids hiding content you can already see. For navigation to different content, opt into a fresh fallback with a key. Working on these examples taught me how much Suspense just does for you automatically!

120

Images work the same way (Canary only): an image blocks the boundary until it has loaded, so the reveal never shows a half-loaded photo.

When a ViewTransition animates a Suspense reveal (Canary only), React waits for new fonts, so text never flashes in the wrong font.

111

A stylesheet with a precedence prop blocks the Suspense boundary until the CSS has loaded, so your content never paints unstyled.

One Suspense boundary wrapped in a ViewTransition (Canary only), loading data, a stylesheet, a font, and a portrait. React waits for everything before revealing the card.

111

Cache Components surface errors as you build when something dynamic would block your shell, nudging you toward a more performant app. The shell loads instantly while dynamic parts stream, and on this demo every route lands in the green. We're working hard to make them easier to adopt!

1124

Well, Cache Components ensures this performance! It will provide insights/errors when you're degrading the perf of your app! yeah, scores are nice here too 😁

000

Mutations feel instant with 𝚞𝚜𝚎𝙾𝚙𝚝𝚒𝚖𝚒𝚜𝚝𝚒𝚌 in a client component. The favorite button is one example: it flips right away, the Server Function runs inside a transition, and the cache catches up after.

100

When the data changes, 𝚞𝚙𝚍𝚊𝚝𝚎𝚃𝚊𝚐() from a Server Function invalidates the server cache and the client cache in one call. Favorite a track and everything tagged for that user, like the favorites list, refreshes.

100

With Cache Components, data fetching is dynamic by default and you opt into caching where you want it. 𝚞𝚜𝚎 𝚌𝚊𝚌𝚑𝚎 marks a read as cacheable, 𝚌𝚊𝚌𝚑𝚎𝚃𝚊𝚐() names the data, 𝚌𝚊𝚌𝚑𝚎𝙻𝚒𝚏𝚎() sets how long it stays fresh. It caches on the server and persists in the browser.

100

Loading, errors, and animation are all declarative. You compose them right where they belong in the tree. A Suspense boundary for the skeleton, an ErrorBoundary for what can fail, Crossfade for the reveal. Crossfade is built on `ViewTransition`, a React canary API.

100

Because each component fetches its own data, you can wrap it in Suspense and stream it. The prerendered shell sends right away, and the data streams in when it's ready. Suspense lets you design the loading sequence: reveal what matters first, group the rest, and keep the layout stable.

100

Aurora Scharff @aurorascharff.no · 05/06/2026

In Next.js, a page can be built entirely from async server components. Each one awaits its own query, right where it renders. The data fetching lives in the component that uses it, so there's no prop drilling and no client cache to keep in sync.

100

Backstage at React Norway! Looking forward to this talk! Free livestream: reactnorway.com/tickets/onli...

050

Aurora Scharff @aurorascharff.no · 05/06/2026

Some people werent able to get their full history if they were a long time comitter... Should be doable now with the new paginated UI!

001

Aurora Scharff @aurorascharff.no · 02/06/2026

Cronotype crunches a lot of GitHub data per handle. Cache Components keeps it under the rate limit, plus a sneak peek of some unreleased Next.js enhancements to make navigations instant. cronotype.vercel.app Real user performance across regions:

180

Aurora Scharff @aurorascharff.no · 01/06/2026

It also tracks how you've changed year by year. Mine: Grass Toucher → Drifter → Weekend Warrior → Nine-to-Fiver → Drifter again.

120

Aurora Scharff @aurorascharff.no · 27/05/2026

Huge thanks to @JamesMontemagno for making ClickLight better with a visual settings UI (and the video below). Sliders + presets for size, duration, intensity, and a custom color picker. Out now in v0.2.0. brew upgrade --cask clicklight

150

Aurora Scharff @aurorascharff.no · 26/05/2026

I'm going on tour with the Next.js team in June! Coming to Amsterdam and London to share what's new in Next.js 16.3, hang out with the community, and answer your questions. • June 9: San Francisco: luma.com/vercel-408x • June 11: Amsterdam: luma.com/34nqdfc3 • June 18: London: luma.com/lfr946sc

1142

Aurora Scharff @aurorascharff.no · 24/05/2026

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

2545

Aurora Scharff @aurorascharff.no · 21/05/2026

I built the Community Agent Template a while back, an AI Slack bot with a built-in admin panel. It's up on Vercel templates if you want a reference for building agent apps with Next.js.

130

Aurora Scharff @aurorascharff.no · 15/05/2026

Your tools could be confusing your agents and you'd never know. I've been having my agents friction log confusing moments as they build Next.js apps. • Tags every step smooth, friction, or blocked • Shows what the agent fell back on when it got stuck • Turns each friction point into a concrete fix