尝试从supplies获取数据并构建图像库,但在Next JS 13中获得“结果不可迭代”

lpwwtiir  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(107)

我使用Next.js 13,并得到了一个表上的supplies,我想让我的图片建立一个画廊。
代码如下:
app/products/page.tsx

import { createClient } from '@supabase/supabase-js';
import Gallery from '@/components/Gallery';

export async function generateStaticParams() {
  const supabaseAdmin = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL || '',
    process.env.SUPABASE_SERVICE_ROLE_KEY || ''
  );

  const { data } = await supabaseAdmin.from('images').select('*').order('id');
  return {
    props: {
      images: data,
    },
  };
}

export default function ProductsPage({ images }) {
  return (
    <div>
      <Gallery images={images} />
    </div>
  );
}

得到了一个组件文件夹,以及与

import BlurImage from './BlurImage';

export default function Gallery({ images }: { images: Image[] }) {
  return (
    <div className="mx-auto max-w-2xl py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
      <div className="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
        {images.map((image) => (
          <BlurImage key={image.id} image={image} />
        ))}
      </div>
    </div>
  );
}
'use client';
import Image from 'next/image';
import { useState } from 'react';

function cn(...classes: string[]) {
  return classes.filter(Boolean).join(' ');
}

function BlurImage({ image }: { image: Image }) {
  const [isLoading, setLoading] = useState(true);

  return (
    <div className="group">
      <div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
        <Image
          alt=""
          src={image.imageSrc}
          layout="fill"
          objectFit="cover"
          className={cn(
            'duration-700 ease-in-out group-hover:opacity-75',
            isLoading
              ? 'scale-110 blur-2xl grayscale'
              : 'scale-100 blur-0 grayscale-0'
          )}
          onLoadingComplete={() => setLoading(false)}
        />
      </div>
    </div>
  );
}

export default BlurImage;

我以前在page.tsx上使用getStaticProps,但我发现你不能再在app目录上使用它了,不知道该怎么办。
这是我的晚餐桌:enter image description here
这就是我得到的错误:enter image description here

bvpmtnay

bvpmtnay1#

你应该读一下generate-static-params
generateStaticParams函数可以与动态路由段结合使用,以便在构建时静态生成路由,而不是在请求时按需生成路由。
此函数在构建时运行以构建静态路径。这类似于getStaticPaths。它不返回props对象,该对象作为prop传递给组件。它返回存储在数据库中的所有slug(或您定义的所有唯一属性)的数组。您将在文档链接中看到示例。在你的代码中不需要getStaticParams。您可以将代码定义为async,并直接在组件内部获取数据:

// I marked the component as async
export default async function ProductsPage() {
  const supabaseAdmin = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL || '',
    process.env.SUPABASE_SERVICE_ROLE_KEY || ''
  );

  const { data } = await supabaseAdmin.from('images').select('*').order('id');
  return (
    <div>
      {/* data is passed as the prop data */}
      <Gallery images={data} />
    </div>
  );
}

相关问题