próxima visualização de transições

transições de próxima visualização

Use a API View Transitions no Next.js App Router.

Demonstração .

Isenção de responsabilidade

Esta biblioteca é voltada para casos de uso básicos de View Transitions e Next.js App Router. Com aplicativos e casos de uso mais complexos, como renderização simultânea, Suspense e streaming, novas primitivas e APIs ainda precisam ser desenvolvidas no núcleo do React e do Next.js no futuro (mais).

Instalação

Use seu gerenciador de pacotes favorito para instalar o pacote next-view-transitions . Por exemplo:

pnpm install next-view-transitions

Uso

Envolva seu conteúdo com o componente dentro do arquivo de layout:

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

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

Em seguida, use o componente para links que precisam acionar uma transição de visualização:

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

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

Ou use o gancho useTransitionRouter para navegação programática:

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

export default function Component ( ) {
  const router = useTransitionRouter ( )

  return (
    < div >
      < button onClick = { ( ) => {
        // All Next.js router methods are supported
        router . push ( '/about' )
      } } > Go to /about < / button >
    < / div >
  )
}

É isso!

Licença

MIT.