> Aperture 0.1.0 — experimental, unpublished. [Package archive](/downloads/bolted-aperture-0.1.0.tgz).

# Next.js App Router integration

Read [the shared guide](guide.md) and [React guide](react.md). Use the Next starter for real navigation between server-rendered pages with a client reveal.

Put the interactive component behind a `"use client"` boundary. Import `useAperture` from `@bolted/aperture/react`. Pages and layouts can stay server components. The package's React module has its own client directive, but your component also needs a boundary when it uses hooks or event handlers.

Use the recipe as data. Pass it across the boundary as serializable JSON; use `recipeToOptions` inside the client component. Do not instantiate a DOM controller during server render or serialize controllers/functions into server props.

Aperture animates a local host, not an entire Next route automatically. Keep a real `<Link href="/destination">` or anchor so modified clicks, new tabs, keyboard activation, and no-JS navigation work. Only intercept an ordinary same-tab activation. Await the reveal and call `router.push()` only when the result is `completed` and the request is still current. On cancellation restore the opener and leave the route unchanged. Do not use a plain `await open(); router.push(...)` without checking interruption.

Keep next/navigation routing in the application. Do not introduce another router or promote the page/layout to a client component unnecessarily. Verify the production build and actual route destination, not just a local overlay. Preserve native dialog fallback and focus/scroll cleanup if the transition uses a modal overlay.