microCMSのeyecathを表示したい（Next.js14(appRouter)使用）

実現したいこと

microCMSのAPIで取得したeyecath(url, height, width)を画面に表示したい

発生している問題・分からないこと

自分のできる限りに調べて参考にしてみても、うまく表示されません。

該当のソースコード

page.tsx
1import React from 'react'
2import {client} from '@/lib/microcms'
3import Link from 'next/link';
4import Image from 'next/image';
5
6//型定義
7interface Props {
8    id:string,
9    title:string,
10   content:string,
11   eyecath:{url:string,height:number,width:number},
12}
13
14//ブログ記事を取得
15async function getBlogPosts():Promise<Props[]> {
16    const data = await client.get({endpoint:'blogs'})
17
18    return data.contents;
19}
20
21export default async function Blogpage() {
22    const posts = await getBlogPosts()
23    // console.log(posts)
24  return (
25    <div>
26    {/*コード省略...*/}
27        {posts.map((post) => (
28          <div key={post.id} className="group">
29            <Link href={`blogs/${post.id}`}>
30              <div className...>
31                //問題の部分
32                {post.eyecath && (
33                   <Image src={post.eyecath.url}alt="blog eyecath" height={post.eyecath.height} width={post.eyecath.width}/>
34                )}
35　　　　　         //
36                <div>
37                  <h2>
38                    {post.title}
39                  </h2>
40                  <p dangerouslySetInnerHTML={{__html:`${post.content}`}} >
41                  </p>
42                  <div >
43                    記事を読む
44                    <svg ...">
45                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
46                    </svg>
47                  </div>
48                </div>
49              </div>
50            </Link>
51          </div>
52        ))}
53      </div>
54    </div>
55    </div>
56
57)
58}

next.config.ts
1import type {NextConfig } from "next";
2
3const nextConfig: NextConfig = {
4  /* config options here */
5  images: {
6    domains: ["images.microcms-assets.io"],
7  }
8};
9
10export default nextConfig;