[알게된 것] Shadcn Pagination Text content does not match server-rendered HTML

😀문제상황

NextJS에서 Shadcn-UI를 사용해 Pagination을 구현하려는데, 자꾸 해당 에러가 뜸

😎해결방법

1. PaginationLink의 a 태그를 Link 태그로 변경한다.

type PaginationLinkProps = {
  isActive?: boolean;
} & Pick<ButtonProps, "size"> &
  React.ComponentProps<typeof Link>;

const PaginationLink = ({
  className,
  isActive,
  size = "icon",
  ...props
}: PaginationLinkProps) => (
  <PaginationItem>
    <Link
      aria-current={isActive ? "page" : undefined}
      className={cn(
        buttonVariants({
          variant: isActive ? "outline" : "ghost",
          size,
        }),
        className
      )}
      {...props}
    />
  </PaginationItem>
);

2. PaginationItem 이 li 태그가 아닌 div 태그를 사용하게 한다.

const PaginationItem = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("", className)} {...props} />
));

에러 로그를 보면 li의 중첩 사용으로 망가진 것을 볼 수 있으며 div로 변경하는 순간 정상 동작함

예시 코드를 붙여넣었을 뿐인데 어째서 이런 오류가 있는지는 파악 못 해봤고 신기능이니 그러려니 하는 중