Working with links
It's best practice to have links in your site to other pages and external sources. But how do you do this? Here, we'll go through how links can be configured in studio, how the API hub delivers them, and how you can use links in the frontend.
To allow a studio user to configure a link, a field of type
node (which is the legacy name for a page folder) needs to be added to a Frontend component schema. The difference between
node is that the first one gives the user a choice between internal and external links, while the latter only allows internal links to page folders.
Below is an example Frontend component schema that has 3 fields that show how the data is configured:
The example shows 3 fields to see the different representations of a reference in the API hub further down this article.
When you preview the above JSON in the schema editor, you can see how each would display in the component settings:
API hub data
Once configured, the Frontend component data provided to you by the API hub follows the TypeScript interfaces
reference fields) and
A reference always contains its
type (selected in studio) and if the link is expected to
openInNewWindow. For a
link property holds the target URL (relative or absolute).
PageFolderReferenceValue holds a
pageFolder instead of the
link. This is of type
PageFolderValue and contains information about the page folder, such as its
name. It also holds the special field
_urls, which contains a map of all defined locales to the corresponding path for the page folder. This map allows you to link to the folder in different languages in a multi-language project.
PageFolderValue is meant to contain a property
_url, which holds the path of the page folder in the current locale so that you don't need to care for locale resolution in the frontend. This feature is still to be implemented.
If you use a
node type field, the value received is only the inner
PageFolderValue, for example: