# How to get url from link in typescript/Next.js project **URL:** \ **Category:** Developing with Prismic\ **Tags:** nextjs\ **Created:** [January 25, 2023, 4:48pm UTC](https://community.prismic.io/t/how-to-get-url-from-link-in-typescript-next-js-project/12270 "2023-01-25T16:48:10Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![thejessewinton](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@thejessewinton](https://community.prismic.io/u/thejessewinton)\ **Post date:** [January 25, 2023, 4:48pm UTC](https://community.prismic.io/t/how-to-get-url-from-link-in-typescript-next-js-project/12270/1 "2023-01-25T16:48:10Z")
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: ```auto Property 'url' does not exist on type 'EmptyLinkField<"Any"> | FilledLinkToWebField | FilledContentRelationshipField | 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? ---
**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\ **Post date:** [January 26, 2023, 3:10pm UTC](https://community.prismic.io/t/how-to-get-url-from-link-in-typescript-next-js-project/12270/3 "2023-01-26T15:10:48Z")
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` > **[@prismicio/helpers Technical Reference](https://prismic.io/docs/technical-reference/prismicio-helpers#aslinkfield-linkresolver)** > > @prismicio/helpers provide a set of helpers to render data from the Prismic API. These helpers help to render the following Prismic fields: Date, Timestamp, Link, Content Relationship, Rich Text, and Titles. ---
**Author:** ![thejessewinton](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@thejessewinton](https://community.prismic.io/u/thejessewinton)\ **Post date:** [January 26, 2023, 4:28pm UTC](https://community.prismic.io/t/how-to-get-url-from-link-in-typescript-next-js-project/12270/4 "2023-01-26T16:28:34Z")
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? ---
**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\ **Post date:** [January 26, 2023, 4:48pm UTC](https://community.prismic.io/t/how-to-get-url-from-link-in-typescript-next-js-project/12270/5 "2023-01-26T16:48:46Z")
The team recommends using ``. This component resolves your external and internal links. So you can skip doing it manually. Here's the dedicated documentation: > **[Template Content in Next.js](https://prismic.io/docs/template-content-nextjs#link)** > > On this page, you'll learn how to template content from the Prismic API in your Next.js application. ---
**Author:** ![thejessewinton](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@thejessewinton](https://community.prismic.io/u/thejessewinton)\ **Post date:** [January 26, 2023, 5:01pm UTC](https://community.prismic.io/t/how-to-get-url-from-link-in-typescript-next-js-project/12270/6 "2023-01-26T17:01:52Z")
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! ---
**Author:** ![crackksheree321](https://avatars.discourse-cdn.com/v4/letter/c/87869e/32.png) [@crackksheree321](https://community.prismic.io/u/crackksheree321)\ **Post date:** [April 25, 2023, 2:06pm UTC](https://community.prismic.io/t/how-to-get-url-from-link-in-typescript-next-js-project/12270/9 "2023-04-25T14:06:27Z")
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[:](https://www.crackshere.com/microsoft-office-2023-product-key-crack/) typescriptCopy code ```auto 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. ---
**Author:** ![crackksheree321](https://avatars.discourse-cdn.com/v4/letter/c/87869e/32.png) [@crackksheree321](https://community.prismic.io/u/crackksheree321)\ **Post date:** [April 25, 2023, 2:07pm UTC](https://community.prismic.io/t/how-to-get-url-from-link-in-typescript-next-js-project/12270/10 "2023-04-25T14:07:27Z")
further I am trying to post but it shows an error. ---
**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\ **Post date:** [August 29, 2023, 4:24pm UTC](https://community.prismic.io/t/how-to-get-url-from-link-in-typescript-next-js-project/12270/17 "2023-08-29T16:24:08Z")
Just for an update on this one you should now be using PrismicNextLink > **[@prismicio/next Technical Reference](https://prismic.io/docs/technical-reference/prismicio-next#prismicnextlink)** > > @prismicio/next is the official Prismic package for creating web apps with Prismic and Next.js.