Template Links & Content Relationships

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


🚧 Content Relationships not currently available in the Slice Builder

At present, Content Relationship fields are not available in the Slice Builder. This feature is currently in development.

You can still use Content Relationships by editing the Custom Type in the Prismic Custom Type editor. There, you can use Content Relationships outside the Slice Zone and in Slices that you create in the editor.


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.

Copy
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.

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

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:

Copy
"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

Copy
<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.