Next.js 13集成Contentful数据获取异常及代码优化咨询

问题一：Next.js 13中getStaticProps获取Contentful数据返回undefined #

我用Next.js 13从Contentful CMS获取数据，以下代码里console.log(recipes)始终输出undefined。这段代码在旧版Next.js中可正常运行，且已确认内容模型ID无误，请求排查原因。

代码如下：

import { createClient } from 'contentful'

export async function getStaticProps() {

  const client = createClient({
    space: process.env.CONTENTFUL_SPACE_ID,
    accessToken: process.env.CONTENTFUL_ACCESS_KEY,
  })
  
  const res = await client.getEntries({ content_type: "recipe" })

  return {
    props: {
      recipes: res.items,
    }
  }
}

export default function Home({ recipes }) {
  console.log(recipes)
  return (
    <div>
      blabla
    </div>
  );
}

问题二：简化Contentful内容渲染工作流，匹配原排版 #

后续我写出了一段带图片的功能代码，可正常运行并保留富文本换行，但图片位置不符合预期。想请教如何简化该工作流，让页面排版与Contentful中一致，避免过多代码变通。

代码如下：

import Image from 'next/image';
import { createClient } from 'contentful';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import About from './Ueber/Page';

const { CONTENTFUL_SPACE_ID, CONTENTFUL_ACCESS_KEY } = process.env;

async function getBlocks() {
  const res = await fetch(
    `https://cdn.contentful.com/spaces/${process.env.CONTENTFUL_SPACE_ID}/entries?access_token=${process.env.CONTENTFUL_ACCESS_KEY}&content_type=homeBlock`
  );
  return res.json();
}

// Options for rendering rich text
const renderOptions = {
  renderText: text => text.split('\n').flatMap((text, i) => [i > 0 && <br key={`br-${i}`} />, text]),
};

export default async function HomeBlock() {
  const data = await getBlocks();

  const blocks = data.items.map((item) => {
    const blockText = item.fields.blockText;
    const paragraphs = documentToReactComponents(blockText, renderOptions);
    const paragraphsWithLineBreaks = paragraphs.flatMap((paragraph, index) => [
      paragraph,
      index < paragraphs.length - 1 && <br key={`br-${index}`} />,
    ]);

    const blockPic = data.includes.Asset.find((asset) => asset.sys.id === item.fields.blockPic.sys.id);
    const imageUrl = `https:${blockPic.fields.file.url}`;

    return {
      paragraphs: paragraphsWithLineBreaks,
      imageUrl,
    };
  });

  return (
 <div className="flex flex-col items-center justify-center mt-8 p-8">
      {blocks.map((block, index) => (
        <div
          key={index}
          className="text-xl flex items-center justify-center gap-4 w-full mb-8 py-4 px-8"
        >
          <div className="max-w-md" style={{ whiteSpace: 'pre-line' }}>
            {block.paragraphs}
          </div>
        </div>
      ))}
      <div className="flex justify-center">
        <div className="w-60 flex justify-end">
          <div className="flex items-center">
            <img
              src={blocks[blocks.length - 1]?.imageUrl}
              alt="Block Image"
              className="rounded-full max-h-60"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Karl