Custom row component for Next.js Link

[markedwards]

We have tables where each row should be entirely clickable, and links to a different route in our Next.js app. At the moment we use router.push() in an onClick() handler in muiTableBodyRowProps. I'm looking for a solution which uses the Next.js <Link> component instead, to take advantage of its prefetching feature.

Is there a way to custom render the row, similar to the Cell prop of columns? The idea would be to wrap the row in a <Link> component.

An alternative is to add a hidden <Link> to a cell for prefetching, and continue using router.push(), but it would be nice to have a more elegant approach.