plumeria ViewTransition API - Next.js

install @plumeria/core and next-link-transitions

pnpm i @plumeria/core next-link-transitions

install @plumeria/compiler

pnpm i -D @plumeria/compiler

Define animation.entry and animation.old classes. Pass the animation as arguments to viewTransitionOld and viewTransitionNew.

import { css } from '@plumeria/core';

const fadeOut = css.keyframes({
  from: { opacity: 1 },
  to: { opacity: 1 },
});

const fadeIn = css.keyframes({
  from: { opacity: 0 },
  to: { opacity: 1 },
});

const longCrossFade = css.viewTransition({
  old: {
    animation: fadeOut,
    animationDuration: '1.4s',
  },
  new: {
    animation: fadeIn,
    animationDuration: '1.4s',
  },
});

export const transition = css.create({
  name: {
    viewTransitionName: longCrossFade,
  },
});

In the component you are using, pass the old class and entry class to the Link imported from next-link-transition and you're done.

Now you can use ViewTransition in Server Components.

import { Link } from 'next-link-transitions';
import { animation } from 'lib/viewTransition';

const Header = (): JSX.Element => {
  return (
    <Link href="/about" viewTransitionName={transition.name}>
      about
    </Link>
  );
};

export default Header;

Back and forward are not implemented from a UX perspective and implementation perspective (because they require a useEffect).