View Transitions API for Next.js App Router
npm install @solvro/next-view-transitionsUse View Transitions API in Next.js App Router.
Demo.
This library is aimed at basic use cases of View Transitions and Next.js App Router. With more complex applications and use cases like concurrent rendering, Suspense and streaming, new primitives and APIs still need to be developed into the core of React and Next.js in the future (more).
Use your favorite package manager to install the @solvro/next-view-transitions package. For example:
``bash`
pnpm install @solvro/next-view-transitions
Wrap your content with the component inside the layout file:
`jsx
import { ViewTransitions } from "@solvro/next-view-transitions";
export default function Layout({ children }) {
return (
{children}
);
}
`
Then, use the component for links that need to trigger a view transition:
`jsx
import { Link } from "@solvro/next-view-transitions";
export default function Component() {
return (
Or use the
hook for programmatic navigation:`jsx
import { useTransitionRouter } from "@solvro/next-view-transitions";export default function Component() {
const router = useTransitionRouter();
return (
// All Next.js router methods are supported
router.push("/about");
}}
>
Go to /about
);
}
``That's it!
Released under the MIT License.
Originally developed by Shu Ding.
Forked and maintained by Konrad Guzek under the @Solvro namespace.
© 2024 Shu Ding — © 2025 Konrad Guzek.