Create Simple URLs (Link Resolver)

By the end of this article you will learn how to create simple URLs for links to your Prismic documents using the Link Resolver.


Your Link fields and Rich Text fields may contain a link that points to a Document in your Prismic repository. To make this link work properly within your website, you need to have a Link Resolver function that returns the appropriate path within your website. This Link Resolver function will take a Prismic Document object as an argument and return the corresponding route path of your website.


Route Resolver vs Link Resolver?

You may be asking what the difference between this new Route Resolver and the existing Link Resolver?

Good question. The most obvious difference is that the Route Resolver gets its information server-side which makes it possible to create nested routes to the Grandparent level.

While the Link Resolver is limited to client-side singular document data, so you can only create routes with Parent data.

Which Resolver takes priority?

Your project should first try to find the route for the current document in the Link Resolver. If it returns null for that document then it calls the Route Resolver which is defined in the apiOptions as shown below.


Define the Link Resolver Function

Since routing is specific to your website, you need to explicitly define your internal routing in the Link Resolver function. You simply have to add the function in your prismic-configuration.js file at the root of your project, Here's what it looks like:

Copy
module.exports = {
    apiEndpoint: 'https://your-repository-name.cdn.prismic.io/api/v2',
    repoName: "your-repository-name",
    linkResolver: function(doc) {
        if (doc.isBroken) {
            return '/not-found';
        }
        if (doc.type === 'home') {
            return '/';
        }
        if (doc.type === 'page') {
            return '/page/' + doc.uid;
        }
        return '/';
    }
};

Accessible Properties

The Link Resolver function should pass a Prismic Document object as a parameter. Inside the function you will have access to the following properties:

doc.id

string

The document ID

doc.uid

string

The user-friendly unique identifier

doc.type

string

The custom type of the document

doc.tags

array

Array of the document tags

doc.lang

string

The language code of the document

doc.isBroken

boolean

Boolean that states if the link is broken or not


Use the Link Resolver in your Project

To make sure that your Link Resolver function is used by the <NextLink> and Prismic <RichText/> components in your project, you need to define a file like a prismic-configurations.js file at the root of your project so it can be imported globally as in the following.

Example Link Resolver

Copy
module.exports = {
    apiEndpoint: 'https://your-repository-name.cdn.prismic.io/api/v2',
    repoName: "your-repository-name",
    linkResolver: function(doc) {
      if (doc.type === 'page') {
        return `/${doc.lang}/${doc.uid}`;
      }
      return '/';
    }
};

Example Link Component Using the Link Resolver

A helper function to convert Prismic Rich Text links to Next/Link components.

Copy
import Link from 'next/link'
import { linkResolver } from "../prismic-configuration" // or to the path where you defined this

export const customLink = (type, element, content, children, index) => (
    <Link key={element.data.id} as={linkResolver(element.data)}>
        <a>{content}</a>
    </Link>
)

Related Articles


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.