Nextjs - How to Display Objects With Nextjs

The issue you're experiencing is that you're trying to pass partner.partnerLogo.asset._ref directly to the Next.js Image component, but the _ref is just a reference string (like "image-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg"), not a usable image URL.

Here's how to properly display Sanity images with Next.js:

Solution 1: Use @sanity/image-url (Recommended)

First, install the package:

npm install @sanity/image-url

Create a helper file (e.g., sanityImageUrl.ts):

import { createImageUrlBuilder } from '@sanity/image-url'
import type { SanityImageSource } from '@sanity/image-url'
import { client } from './client' // your Sanity client

const builder = createImageUrlBuilder(client)

export function urlFor(source: SanityImageSource) {
  return builder.image(source)
}

Then use it in your component:

import { urlFor } from './sanityImageUrl'
import Image from 'next/image'

{logos[0].Partenaires.map((partner, i) => (
  <Image
    src={urlFor(partner.partnerLogo).url()}
    alt={partner.partnershipName}
    key={i}
    width={200}  // specify actual dimensions
    height={40}
    quality={100}
  />
))}

Important notes:

• Pass the entire partner.partnerLogo object (not just asset._ref) to urlFor() so it respects any crop/hotspot settings
• Use width and height props instead of layout="fill" (deprecated in Next.js 13+)
• Don't forget to configure remotePatterns in next.config.js:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.sanity.io',
      },
    ],
  },
}

Solution 2: Query for the full URL in GROQ

Alternatively, you can get the URL directly in your GROQ query:

*[_type == 'yourType'] {
  Partenaires[]{
    partnershipName,
    "imageUrl": partnerLogo.asset->url
  }
}

Then use it directly:

<Image
  src={partner.imageUrl}
  alt={partner.partnershipName}
  width={200}
  height={40}
/>

The @sanity/image-url approach (Solution 1) is better because it automatically handles image transformations, respects editor-defined crops/hotspots, and lets you easily adjust image sizes on the fly with methods like .width(800) or .height(600).