Skip to content

Latest commit

 

History

History
53 lines (38 loc) · 1019 Bytes

README.md

File metadata and controls

53 lines (38 loc) · 1019 Bytes
Raw

next-view-transitions

Use CSS View Transitions API in Next.js App Router.

Demo.

Installation

Use your favorite package manager to install the next-view-transitions package. For example:

pnpm install next-view-transitions

Usage

Wrap your content with the <ViewTransitions> component inside the layout file:

import { ViewTransitions } from 'next-view-transitions'

export default function Layout({ children }) {
  return (
    <ViewTransitions>
      <html lang='en'>
        <body>
          {children}
        </body>
      </html>
    </ViewTransitions>
  )
}

Then, use the <Link> component for links that need to trigger a view transition:

import { Link } from 'next-view-transitions'

export default function Component() {
  return (
    <div>
      <Link href='/about'>Go to /about</Link>
    </div>
  )
}

That's it!

License

MIT.