View transitions and plumeria - 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 oldTransition = css.keyframes({
  from: {
    opacity: 1,
  },
  to: {
    opacity: 0,
  },
});

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

export const animation = css.create({
  entry: {
    viewTransitionName: newTransition,
  },
  old: {
    viewTransitionName: oldTransition,
  },
});

css.global({
  [css.pseudo.viewTransitionOld(oldTransition)]: {
    animation: '0.4s ease',
    animationName: oldTransition,
  },
  [css.pseudo.viewTransitionNew(newTransition)]: {
    animation: '0.4s ease',
    animationName: newTransition,
  },
});

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" entry={animation.entry} old={animation.old}>
      about
    </Link>
  );
};

export default Header;