Next.js首页无法在Storybook中正常显示的问题求助

我第一次尝试把Next.js的首页集成到Storybook里，跟着教程一步步操作：先是创建了Next项目，初始化Storybook后运行起来一切正常。

接下来我创建了Home.stories.tsx文件，里面的代码是这样的：

import Home from "../pages/index"

// eslint-disable-next-line import/no-anonymous-default-export
export default {
  title : "Pages/Home",
  component : Home,
};

export const HomePage = () => <Home />

另外为了让图片能在Storybook里正常加载，我在preview.js文件中添加了这段配置：

import * as NextImage from "next/image"

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, "default", {
  configurable : true,
  value : (props) => < OriginalNextImage {...props} unoptimized />
})

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

现在启动Storybook后，虽然能进入Storybook的主页面，但我的Next.js首页内容完全看不到（相关截图已附在下方）。有没有朋友能帮我排查下哪里操作漏了或者代码有问题？万分感谢！

备注：内容来源于stack exchange，提问作者risky last