How to fetch and render views.

You can use the `getView` helper to fetch and render views.


You need to install the JSON:API Views module to use `getView`.


Let's say you have a `field_view` on a `node`. The `field_view` returns a view value as follows: `NAME--DISPLAY`.

You can use `getView` in `getStaticProps` to load the view and pass the results to the component.


import Link from "next/link"
import { getView } from "next-drupal"
export default function Page({ node }) {
return (
// ...
// highlight-start
<h2>Related Articles ({node.field_view?.meta?.count})</h2>
{node.field_view? => {
return (
<li key={}>
<Link href={article.url} passHref>
// highlight-end
export async function getStaticPaths(context) {
return {
paths: await getPathsFromContext("node--page", context),
fallback: false,
export async function getStaticProps() {
const node = await getResourceFromContext("node--page", context)
// Load the view and inline it to node.
if (node.field_view) {
node.field_view = await getView(node.field_view)
return {
props: {


See the reference to learn more about using filters, JSON:API params and TypeScript with `getView`.