Replace `<Pagination>` `<button>` s with `<a>`s

[mcapodici]

Note: if you like the idea, I am happy to create a PR.

Is your feature request related to a problem? Please describe. I want to use pagination but with each number being an anchor instead of relying on an event handlers.

This is mostly for SEO purposes. Search engines may not run the JS to see where the pagination actions lead to, and even if they do, they may not consider it an internal link.

Describe the solution you'd like A clear and concise description of what you want to happen.

The current api is like this:

<Pagination
  currentPage={1}
  onPageChange={t}
  totalPages={100}
/>

I would probably do it like this:

Add another prop called getPageUrl, that takes a function from a number to a string. If supplied, the page link is wrapped in a Next Link with the anchor being the provided string.

getPageUrl can be used in conjunction with onPageChange, in which case the action in onPageChange takes precedence, but the link is still there for SEO purposes.

If getPageUrl is supplied but there is no onPageChange, clicking the page number takes you to the URL as per normal browser behaviour.

Example use:

<Pagination
  currentPage={1}
  getPageUrl={(p) => `/pages/${p}`}
  totalPages={100}
/>

Describe alternatives you've considered

• I could write my own component
• I could use the pagination as-is, and separately put links in the bottom of the page for SEO.

[mcapodici]

Sorry - slight amendment - I for some reason had my "Next" hat on. For the general case you might what to render a regular <a>, since this library has nothing to do with Next specifically!

[tulup-conner]

Thanks, this use case makes a lot of sense. There's a general sensibility behind using <a> instead, and there's actually more benefits than you listed - you can set <a>s to preload when the link is hovered over by the user, for example.

I think this is worth looking into for sure.

[mcapodici]

Thanks. For various reasons I have gone back to rolling my own component for this. Not a criticism though I often find this when using UI libraries that I need to have the component in my source code to fine tune it.