View transitions

This documentation site uses Next.js’s built-in View Transition integration, not the optional next-view-transitions package (that package is commonly used with nextra-theme-blog). With nextra-theme-docs, internal navigation goes through next/link inside the theme; enabling experimental.viewTransition and wrapping routed content in React’s <ViewTransition> is enough for route changes to animate in browsers that support the View Transitions API .

What was enabled

1. Next.js config

In next.config.mjs, experimental.viewTransition is set to true. That turns on Next’s support so navigations can participate in view transitions (see Next.js: viewTransition).

2. Root layout

In app/layout.jsx:

• Import ViewTransition from react (Next wires this up when the experimental flag is on).
• Wrap {children} (the MDX page shell passed into nextra-theme-docs’s <Layout>) with <ViewTransition>{children}</ViewTransition>.

Only the main page content subtree is wrapped—the theme still owns the sidebar, navbar, and TOC around children, so chrome stays stable while the article body transitions.

3. Global CSS

app/globals.css is imported from the root layout (after nextra-theme-docs/style.css). It contains a prefers-reduced-motion: reduce block that clears animation duration on ::view-transition-* pseudos so users who ask for less motion get instant swaps instead of animations.

References

• Next.js guide: View transitions  — patterns for shared elements, directional navigation, and customization.
• React: ViewTransition — component API.

Caveats

• The Next viewTransition option is experimental and may change.
• Safari and other engines may differ slightly; without API support, navigation behaves as usual without transitions.