Search code examples
next.jscloudinarycontentfulcontentful-management

How to display Cloudinary assets (integrated from Contentful) with Next.js 13?

I have been recently exploring Contentful CMS and I have been trying to display Cloudinary images/videos that I already placed in Contentful Content Model (JSON field with Cloudinary app applied) into Next.js 13 (I'm using their starter guide: https://www.contentful.com/nextjs-starter-guide/), but I'm pretty new to this so I get stuck lots of times. I have tried to watch their video on how to integrate Cloudinary from Contentful and Next.js but I get confused on how and where they got their GraphQL queries. enter image description here

My code is basically the same with their example here: https://github.com/vercel/next.js/tree/canary/examples/cms-contentful. Its just a matter on how to connect a content JSON to display the Cloudinary app I installed in Contentful. I don't see lots of examples to display Cloudinary assets to Next.js, unless you can tell me otherwise...

If you have any resources or advice you can point me too, I would be happy to hear them out.

Solution

  • To fetch the data from the Cloudinary app, you will have to modify the GraphQL query. In my example, I added the Cloudinary app and connected it with the Cloudinary App JSON field as shown in the screenshot below.

    Screenshot of the Post content type

    Now, to fetch the data from that field, I just had to add cloudinaryApp in my GraphQL query. So now my query looks like:

    const POST_GRAPHQL_FIELDS = `
slug
title
cloudinaryApp
date
author {
  name
  picture {
    url
  }
}
excerpt
content {
  json
  links {
    assets {
      block {
        sys {
          id
        }
        url
        description
      }
    }
  }
}
`

    I hope this helps :)