Replace <Pagination> <button> s with <a>s #791

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.