I'm trying to use a route resolver within my Next.js project that's using Typescript. I'm loving the new typescript support within SliceMachine, but I'm having difficulty accessing the uid or url properties from any given Link component within my project. If, for example, I try and use the url in my socials menu, I'm getting this error:
Property 'url' does not exist on type 'EmptyLinkField<"Any"> | FilledLinkToWebField | FilledContentRelationshipField<string, string, unknown> | FilledLinkToMediaField'.
It seems like there might be some missing support for the route resolver within the typescript space here. The project I'm working on is a very simple portfolio site, so the route resolver will work perfectly for my use case; I just don't want to have to do a lot of hacky workarounds to achieve full type-safety. Is there a better way to get this done/do you support these properties in typescript somehow?
Yes, there's a standardized option for rendering Link fields. Use the asLink() method to retrieve the URL from your links. This allows you to render the Links automatically instead of having to access the actual URL node, for example: document.data.link.url
I had messed around with this as well, but I am using Next13 and the app directory; the PrismicLink component uses context, so it can't work with RSC. I'll continue to manually cast for the time being until Prismic has better support for the app directory. Thank you!
To access the url property of a Link component in a Typescript/Next.js project, you will need to create an interface that extends the default LinkProps interface with your own properties. Here's an example: