Pagination rendering as NextJS Link (or any link for that matter)

[MamkinCoder]

Working with Pagination component without handleClick seems very difficult and unintuitive to me. I want use beautiful default styles and functionality of the component, but also have each item be a <Link> element from NextJS. The component has "renderItem" for advanced customisation but I cant achieve default styling (which I love) with it. Can't there be a simple "as" prop to have links generated?

To give an example: I am generating dynamic routes for each page and need each pagination item to be a <Link> with predetermined urls otherwise I am forced to use Router which is unavailable inside dynamic route generating components in NextJS

//looks absolutely DISGUSTING
export function ChapterPagination({ total, book }: ChapterPaginationProps) {
    return (
        <Pagination
            total={total}
            renderItem={({ value, ...props }) => (
                <Link href={`/books/${book}/${value}`} passHref>
                    <PaginationItem {...props} >
                        {value}
                    </PaginationItem>
                </Link>
            )}
        />
    )
}

//Layout.tsx
export default function BooksLayout({ params, children }: BooksLayoutProps) {
    return (
        <div className="flex flex-col items-center">
            <div>{params.book}</div>
            {children}
            <ChapterPagination total={numOfChaptersPerBook[params.book]} book={params.book} />
        </div>
    )
}

export async function generateStaticParams() {
    const result = Object.keys(bookToNumberMapping).map((book) => {
        return {
            book,
        }
    })
    return result
}

[jrgarciadev]

Hey this should be fixed once this PR gets ready #1776