Template Links & Content Relationships

Package versions

These docs use the following package versions:

  • prismic-reactjs: v1.3
  • @prismicio/client: v5

The docs will soon be updated to use the latest versions of these packages. If you wish to use the latest versions today, you can update your project by following the migration guides for each package.

On this page, you will learn how to template Links and Content Relationships from Prismic in your Next.js project.

API Response

Prismic's Link field allows you to link to an external webpage, an internal Prismic document, or an item in your media library (like a PDF). The Content Relationship field allows you to link specifically to an internal Prismic document.

Here's what a Content Relationship field looks like from the API (a Link takes a similar format); this field has API ID example_content_relationship that links to another document with the API ID another-document have the type page.

example_content_relationship: {
  id: "X9C65hEAAEFIAuLo",
  type: "page",
  tags: [],
  slug: "another-document",
  lang: "en-us",
  uid: "another-document",
  link_type: "Document",
  isBroken: false

Use Cases

There are two things that you might want to do with a link:

  • Link to another page or media item, internally or externally
  • Pull in content from another document

Here's how to do those two things:

Link to Another Page

Internal linking always requires a Link Resolver or Route Resolver.

ℹ️ What is Link and Route Resolver?

In simple terms, Prismic does not know the structure of your React app. So, you need a Link Resolver and in some cases, a Route Resolver to create nested routes to determine the path of internal links. To learn more about how they work, see our page on generating URLs.

By default, your Next.js project will use the Link Resolver that you added in your setup to resolve links. However, when templating Links and Content Relationships, you can also pass a custom link resolver.

ℹ️ This page also assumes that you have retrieved your content and stored it in a state variable named document.

ℹ️ It is also assumed that you have imported a Link Resolver with the variable name linkResolver.

Here's an example of how to template a Link field. In this case, the Link field has the API ID of example_link and uses the NextLink component.

<Link as={linkResolver(document.data.example_link)}> 
  <a>Example Link</a> 

Pull Content from Another Document

To pull in content from another document, you can fetch that content in your API Query, using the graphQuery or fetchLinks option.

Once you have adjusted your API query, the linked content will appear in a "data" object nested in the Link or Content Relationship field:

"example_content_relationship": {
  "id": "X9C65hEAAEFIAuLo",
  "type": "page",
  "tags": [],
  "slug": "another-page-title",
  "lang": "en-us",
  "uid": "page-2",
  "data": {
    "example_key_text": "Another Page Key Text"
  "link_type": "Document",
  "isBroken": false

You can then retrieve and template the Content Relationship field content, as usual. This field has the API ID of example_key_text

<span>{{ document.data.example_content_relationship.data.example_key_text }}</span>

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.