Use next/link inside component library

[bestatigen]

Some of the components (you can find under packages/components) use <a> links, while before moving them into a separate package it was Link from next/link that is necessary to not reload the pages while navigating the app (as it is now). Find clean solutions, that would avoid having to import next/link; comment with the possible solutions so We can have a discussion before implementing.

Links

• https://github.com/vercel/next.js/discussions/15560

[bestatigen]

@alexcentrisky

[alexcentrisky]

if (isInternalLink(url)) {
  if (urlRegistered(url)) {
    render Link from next/link
    return
  }
}
render a tag
return

We can make a custom component like this. isInternalLink will receive a url and check if it's internal link or external link using regEx or string functions and if it's internal link, then urlRegistered will check if it's registered url or not. https://github.com/vercel/next.js/issues/3351 We can try this or store the urls in array and compare them in urlRegistered. This can be done by reading the files inside of pages folder or add the urls one by one in constant array manually. @devey

[bestatigen]

Thanks for looking into this @alexcentrisky. It's not completely clear to me how this solves the problem of passing down Link (from next/link) to the components that needs it? Could you maybe describe an example of how that would work with Menu.tsx?

[alexcentrisky]

https://github.com/vercel/next.js/discussions/15560#discussioncomment-43220

This solution is exactly same to what I meant. Please take a look @devey

[alexcentrisky]

And also I think it would be better if we find a solution in the next/link package codebase rather than peerDependency. @devey

[bestatigen]

I see @alexcentrisky. Could you try to implement a concept of this so We can better understand by looking at some code. Thanks!

[github-actions[bot]]

:tada: This issue has been resolved in version @cura/components-v1.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: