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