Of course it’s possible, Some people would recommend [Framer Motion](https://www.framer.com/motion) for animations. You can also achieve some simple transitions by adding a fade-in animation with css.

yes it is. I use Framer motion like this:

'use client';

import { motion } from 'framer-motion';
import { ReactNode } from 'react';

import { cn } from '@/lib/utils';

function Wrapper({
    children,
    className,
}: {
    children: ReactNode;
    className?: string;
}) {
    return (
        <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{
                opacity: 1,
                y: 0,
            }}
            exit={{
                opacity: 0,
                y: 20,
            }}
            className={cn('mt-8', className)}
        >
            {children}
        </motion.div>
    );
}

export default Wrapper;

and wrap whole content in this Wrapper component

Thanks for the reply @Yi Lon Ma, but i believe the 'use client' directory in the first line prevent it from being a server component.
My question is if it is possible to achieve page transition animation, while keeping the benefits of server components.

wrap your jsx on per page basis

don't put it in root layout

ig you can still use server components nested inside a client component but I'm not sure

Sound good - i will give it a try.