---
title: "JSS components for rendering Sitecore fields in Next.js applications"
slug: "jss-components-for-rendering-sitecore-fields-in-next-js-applications"
abstract: "Describes JSS components for Next.js that help you render Sitecore fields."
---
# JSS components for rendering Sitecore fields in Next.js applications

JSS for Next.js provides components that help you render Sitecore fields in your Next.js applications.

The following table shows the correspondence between Sitecore field types and JSS Next.js components:

| Sitecore field type | JSS Next.js component |
| --- | --- |
| Date | `Date` |
| File | `File` |
| Image | `Image`. Starting with version 20.1, you can also use the [NextImage component](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/the-jss-nextimage-component.html). |
| General Link | `Link` |
| Single-Line Text, Multi-Line Text, or numeric types | `Text` |
| Rich Text | `RichText` |

The following is a list of supported components with examples of using them. In the examples, field data is provided by a `Placeholder` component.

## Date

The `Date` component helps render date and time content fields in JSS applications.

The `Date` component has the following properties:

| Name | Description |
| --- | --- |
| `field` | Required.<br><br>The field you want to render. It must be a Sitecore Date type. The field data has two properties:<br><br><ul><li>The `value` property - represents the raw field value from the Sitecore item.</li><li>The `editable` property - contains the editable markup rendered when editing is enabled.</li></ul> |
| `tag` | The name of the HTML element wrapping the date value.<br><br>Default: `span` |
| `editable` | Explicitly enable/disable inline editing. If `true` and `field.editable` has a value, then `field.editable` is processed and rendered as component output. If `false`, the `field.editable` value is ignored and not rendered.<br><br>Default: `false` |
| `render` | A function that receives the field value as a parsed JavaScript Date object and returns the value to render in the wrapping `tag` of the component. It can be used to format the value for date and datetime localization. |

### Usage

To render a date field, you must import it into your component:

```ts
import { DateField } from '@sitecore-jss/sitecore-jss-nextjs';

```

You can use the component as follows:

- To render a simple date field:

    ```jsx
    <DateField field={props.fields.date} />
    ```

- To render a datetime field:

    ```jsx
    <DateField field={props.fields.dateTime} />
    ```

- To render a date as a UTC-formatted string:

    ```jsx
    <DateField field={props.fields.date} render={(date) => date.toUTCString()} />
    ```

    > [!note]
    > The `render` property is ignored in editing mode.

    The component provides direct access to the JS `Date` object for formatting purposes. Therefore, you can use it to render localized date and datetime strings as follows:

    ```jsx
    <DateField field={props.fields.date} render={(date) => date.toLocaleDateString()} />
    <DateField
      field={props.fields.dateTime}
      render={(date) => <em>{date.toLocaleString()}</em>}
    />
    ```

<details>
<summary><h2>File</h2></summary>

The `File` component renders a file link.

The `File` component has the following properties:

| Name | Description |
| --- | --- |
| `value` | Required.<br><br>The route field you want to render. It represents a Sitecore File type with the properties `src`, `title`, and `displayName`. |
| `children` | A React Node, populating the rendered `<a/>` tag. The default value is the file. |

> [!important]
> The File field does not support inline editing with the Experience Editor. However, it can be edited using the default field editor on components.

### Usage

To render the file field, you must import it into your component:

```ts
import { File } from '@sitecore-jss/sitecore-jss-nextjs';

```

You can use the component as follows:

- To render a simple file link:

    ```jsx
    <File field={props.fields.file} />
    ```

- To render a file link that opens in a new tab with custom anchor text:

    ```jsx
    <File field={props.fields.file} target="_blank">
      View file
    </File>
    ```

</details>

<details>
<summary><h2>Image</h2></summary>

The `Image` component lets you render editable, responsive images.

The `Image` component has the following properties:

| Name | Description |
| --- | --- |
| `field` | Required.<br><br>The field data has two properties:<br><br><ul><li>The `value` property - represents the raw field value from the Sitecore item.</li><li>The `editable` property - contains the editable markup rendered when editing is enabled.</li></ul> |
| `editable` | A Boolean value you can use to enable or disable the inline editing of the image.<br><br>Default: `true`. |
| `imageParams` | An array of `ImageSizeParameters` that converts into [query string parameters](https://community.sitecore.net/technical_blogs/b/sitecorejohn_blog/posts/media-options-and-query-string-parameters-in-the-sitecore-asp-net-cms) added to the image URL. |
| `srcSet` | An array of `ImageSizeParameters` definitions for generating comma-separated strings used as a value for the native image `srcset` attribute. |
| `mediaUrlPrefix` | A custom regular expression that finds the media URL prefix to be replaced by `/-/jssmedia` or `/~/jssmedia`. |

> [!important]
> When using the `imageParams` or `srcSet` properties, your image parameters must be [white-listed on the server](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/media-handler.html "Media Handler") for security purposes.
>
> You can pass additional properties to the component. For example, you can specify values for the native image `sizes` attribute to enable responsive server-side rendered images.

### Usage

To use the `Image` component, you must import it into your component:

```ts
import { Image } from '@sitecore-jss/sitecore-jss-nextjs';

```

You can use the `Image` component to render:

- A simple image:

    ```jsx
    <Image media={props.fields.sample1} />
    ```

- A responsive image:

    ```jsx
    <Image
      field={props.fields.sample2}
      srcSet={[{ mw: 300 }, { mw: 100 }]}
      sizes="(min-width: 960px) 300px, 100px"
      className="img-fluid"
    />
    ```

- An image with advanced configuration. For example, the following sample renders an image that is not editable in a Sitecore content and layout editor like the Experience Editor. The image is resized server-side based on the `imageParams` property:

    ```jsx
    <Image
      field={props.fields.sample2}
      editable={false}
      imageParams={{ mw: 100, mh: 50 }}
      height="50"
      width="94"
      data-sample="other-attributes-pass-through"
    />
    ```

</details>

<details>
<summary><h2>Link</h2></summary>

The `Link` component helps you render the content of the *General Link* Sitecore field.

The component checks if the link in the Sitecore field is internal, and if so, it renders the link using the Next.js Link component (`next/link`). Otherwise, it renders a [Link component](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/jss-components-for-rendering-sitecore-fields-in-next-js-applications.html#UUID-ae15961d-d47e-4705-9e72-79fc3a269a72_section-idm4537100629222432630757789717 "Link").

The `Link` component has the following properties:

| Name | Description |
| --- | --- |
| `field` | Required.<br><br>The route field you want to render. It must be a Sitecore *General Link* field type. The field data has the following properties:<br><br><ul><li>The `value` property - represents the raw field value from the Sitecore item.</li><li>The `editableFirstPart` property - contains the first part of the editable markup rendered when editing is enabled.</li><li>The `editableLastPart` property- contains the last part of the editable markup rendered when editing is enabled.</li></ul> |
| `editable` | Indicates whether to use the editor or Sitecore-formatted HTML output.<br><br>Default: `true`<br><br>> [!note]<br>> If using editable output from Sitecore, Link creates a wrapper span around the Sitecore-provided markup and applies host element attributes to this span. |
| `internalLinkMatcher` | A Regex pattern for identifying internal links.<br><br>Default: ` /^\//g` |
| `showLinkTextWithChildrenPresent` | A Boolean expression that enables or disables the display of a link description even when children exist.<br><br>> [!note]<br>> This setting is ignored in the Sitecore Experience Editor due to technical limitations, and the description is always rendered. |
| `prefetch` | Whether [Next js prefetching](https://nextjs.org/docs/pages/api-reference/components/link#prefetch) is enabled for the link. Requires JSS version 22.5.1 or later (in previous versions, prefetching was always enabled).<br><br>Default: `true` |

### Usage

To use the `Link` field helper component, you must import it into your component:

```ts
import { Link } from '@sitecore-jss/sitecore-jss-nextjs';

```

You can use the `Link` component to render:

- External links:

    ```jsx
    <Link field={props.fields.externalLink} />
    ```

- Internal links with HTML or other components:

    ```jsx
    <Link field={props.fields.internalLink}>
      <em>HTML</em> or other components can be used within link renderers, for example, links to images.
    </Link>
    ```

- Email links:

    ```jsx
    <Link field={props.fields.emailLink} />
    ```

- A content parameters link:

    ```jsx
    <Link field={props.fields.paramsLink} />
    ```

The link component accepts additional properties or attributes. For example:

```jsx
<Link
  field={props.fields.externalLink}
  showLinkTextWithChildrenPresent={true}
  className="font-weight-bold"
  data-otherattributes="pass-through-to-anchor-tag"
/>

```

> [!note]
> In the Experience Editor, a link description is always rendered in editing mode. If the link has any children, they are rendered as siblings to the link description.

</details>

<details>
<summary><h2>Text</h2></summary>

The `Text` component helps you render Sitecore fields of type *Single-Line Text*, *Multi-Line Text*, or numeric fields.

The `Text` component has the following properties:

| Name | Description |
| --- | --- |
| `field` | Required.<br><br>The field you want to render. The field data has two properties:<br><br><ul><li>The `value` property - represents the raw field value from the Sitecore item.</li><li>The `editable` property - contains the editable markup rendered when editing is enabled.</li></ul> |
| `tag` | The name of the HTML element you want to wrap the text value.<br><br>Default: `span` |
| `editable` | Indicates whether to use the editor or Sitecore-formatted HTML output.<br><br>Default: `true` |
| `encode` | Enables or disables HTML encoding of the output value. Setting this to `false` value also makes `editable: false`.<br><br>Default: `true` |

For a *Multi-line Text* field type, in the provided editable value, any line breaks are replaced by `<br />`. When using the non-editable value, you can process `field.value` to replace JSON newlines with the desired markup or use a CSS white-space value such as pre-wrap.

### Usage

To use the `Text` component, you must import it into your component:

```ts
import { Text } from '@sitecore-jss/sitecore-jss-nextjs';

```

You can render:

- A text field with default options:

    ```jsx
    <Text field={props.fields.sample} />
    ```

- A non-editable text field with a custom tag, CSS classes, and custom attributes:

    ```jsx
    <Text
      field={props.fields.sample2}
      tag="section"
      editable={false}
      encode={false}
      className="font-weight-bold"
      data-sample="other-attributes-pass-through"
    />
    ```

If you want to render the raw value of a Sitecore text field, add the `getFieldValue` function to your import statement. You can then inspect the raw value in your application. For example:

```jsx
<div>Raw value (not editable): {getFieldValue(props.fields, 'sample')}</div>

```

</details>

<details>
<summary><h2>RichText</h2></summary>

The `RichText` component helps you render Sitecore *Rich Text* fields.

The `RichText` component has the following properties:

| Name | Description |
| --- | --- |
| `field` | Required.<br><br>The field you want to render. The field data has two properties:<br><br><ul><li>The `value` property - represents the raw field value from the Sitecore item.</li><li>The `editable` property - contains the editable markup rendered when editing is enabled.</li></ul> |
| `tag` | The name of the HTML element you want to wrap the text value.<br><br>Default: `div` |
| `editable` | Indicates whether to use the editor or Sitecore-formatted HTML output.<br><br>Default: `true` |
| `prefetchLinks` | The prefetch method for links within the rich text component. This can be one of the following:<br><br><ul><li>`true` - all links are prefetched on page load. This provides the best overall performance but can incur higher resource costs.</li><li>`hover` - links are individually prefetched when a user hovers their mouse over them. This offers some performance benefits without a substantial resource cost. Requires JSS version 22.5.1 or later</li><li>`false` - links are never prefetched. This means performance will be slower but data is only fetched when a link is clicked.</li></ul><br><br>Default: `true` |

### Usage

To use the `RichText` component, you must import it into your component:

```ts
import { RichText } from '@sitecore-jss/sitecore-jss-nextjs';

```

You can render:

- A field with default options:

    ```jsx
    <RichText field={props.fields.sample} />
    ```

- A non-editable rich-text field with a custom tag, CSS classes, and custom attributes:

    ```jsx
    <RichText
      field={props.fields.sample2}
      tag="section"
      editable={false}
      className="font-weight-bold"
      data-sample="other-attributes-pass-through"
    />
    ```

</details>