Files
water 51eb0ff050 docs(next-app): add optional Emotion registry for Suspense streaming (#10943)
* feat(Button): add accessibleWhenDisabled prop for accessible disabled state

When the `accessibleWhenDisabled` prop is set to `true`, the Button
component uses `aria-disabled` instead of the native `disabled`
attribute, keeping the button focusable and accessible to assistive
technologies.

- Add `accessibleWhenDisabled` prop to `ButtonBaseProps`
- Use `aria-disabled` instead of `disabled` when the prop is enabled
- Set `data-disabled` for CSS styling in both modes
- Suppress click events when `aria-disabled` is active
- IconButton and CloseButton inherit the feature via ButtonProps

Closes #10929

* fix: add Emotion style registry for Next.js App Router to prevent hydration errors with Suspense streaming

- Add EmotionRegistry component to sandbox/next-app template with
  delta-tracking cache to avoid duplicated styles
- Add @emotion/cache dependency to sandbox/next-app
- Document the Emotion style registry in the Next.js App Router guide
  including the full EmotionRegistry component code and layout usage
- Update install command to include @emotion/cache

Fixes #10942

* revert: drop unrelated Button accessibleWhenDisabled change

This belongs in #10932, not the Next.js Emotion registry docs.

* test: add Next.js streaming sandbox for Emotion hydration

Reproduces the Suspense/Cache Components mismatch and the Emotion registry fix.

* revert: keep the default next-app template without an Emotion registry

Streaming hydration belongs in the dedicated next-app-streaming sandbox.

* chore: stop ignoring Next agent files in the streaming sandbox

* docs(next-app): make the Emotion registry an optional streaming step

Keep the default install one-pass. Document the registry only for Suspense and Cache Components.

* chore: sync lockfile after dropping @emotion/cache from next-app

CI frozen-lockfile failed because the default template no longer depends on it.

---------

Co-authored-by: waterWang <waterWang@users.noreply.github.com>
Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
2026-08-22 16:25:02 +02:00
..

next-app-streaming

Repro for streamed Emotion styles under Next.js 16 Cache Components.

pnpm --filter next-app-streaming dev            # documented setup, no registry
pnpm --filter next-app-streaming dev:registry   # same app with Emotion registry

Then open http://localhost:3010/ (one-pass) and http://localhost:3010/stream (Suspense).

Use a cold server for /stream. Emotion’s module cache hides the mismatch after the first request.