codegouvfr / react-dsfr

🇫🇷 The Frech Government Design system React toolkit
https://react-dsfr.codegouv.studio
MIT License
403 stars 49 forks source link

fix(Pagination): Allow usage of Pagination component with Next.js #273

Closed DavidFrancois closed 1 month ago

DavidFrancois commented 1 month ago

ATM when on the first or last page of the pagination component, a Link component is generated with no href attribute for the first / last page and previous / next page elements of the pagination.

The issue seem to have been running for almost a year now https://github.com/codegouvfr/react-dsfr/issues/170

Issue : Since NextJS can't handle Link without an href attribute, the whole page crashes if we're on the first or last page of the pagination component.

Steps to reproduce : Clone react-dsfr, use a Pagination component in test/integration/next-appdir/ui/ClientComponent.tsx.

Set defaultPage attribue to either 1 or the same as count count attribute, and count > 1. Run and try to access the page.

example :

 <Pagination
        getPageLinkProps={(page) => ({ href: `?page=${page}` })}
        count={10}
        defaultPage={1}>
</Pagination>

Solution : I tried to solve this in the most simple and straight forward way : If we're on either the first or last page of the Pagination component, then we use a <a> HTML element instead of <Link> for those specific action links.

Since the link is not clickable anyway in such case, this should not cause any issue or regression.

martinratinaud commented 1 month ago

Need this ASAP :-) Thanks a lot

garronej commented 1 month ago

Thank you for taking the time to submit a PR!