How to get url from link in typescript/Next.js project

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?

1 Like

Hello @thejessewinton,

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

1 Like

I've been using that, but I have to manually cast the return type as a string:

asLink(social.link) as string

Is this the most effective way to do it?

The team recommends using <PrismicLink>. This component resolves your external and internal links. So you can skip doing it manually. Here's the dedicated documentation:

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!

1 Like

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:

typescriptCopy code

import { LinkProps } from 'next/link'

interface CustomLinkProps extends LinkProps {
  url: string
}

In this example, we've created a new interface called CustomLinkProps that extends the default LinkProps interface provided by Next.js. We've also added a new property called url, which is a string.

further I am trying to post but it shows an error.

Just for an update on this one you should now be using PrismicNextLink