인프런 커뮤니티 질문&답변

안녕하세요!

클론하다가 React에서 Framer로 레이아웃을 이전 이후로 나누어서 페이지 전환을 스무스하게 animation을 줬던 기억이 있어서 반영해봤는데요.

위의 페이지 전환 효과를 next 프로젝트에도 반영해보려고 하는데

App Router의 특성? 때문인지 {children} 으로 라우팅을 전달 받기 때문에 이전, 이후가 아닌 공통적인 레이아웃으로 취급되고 명확한 구분(id)가 없기 때문에 부드러운 전환이 잘 안되는 걸까요..

유추한 내용이 맞을까요..?

타 라이브러리 질문 안받으신다면 죄송함다 ㅠ

const Framer = ({ children }: { children: ReactNode }) => {
  const pathName = usePathname();

  return (
    <>
      <AnimatePresence mode="wait" initial={false}>
        <motion.div
          key={pathName}
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: -20 }}
          transition={{ duration: 0.5 }}
        >
          {children}
        </motion.div>{" "}
      </AnimatePresence>
    </>
  );
};