Index.tsx
import Image from 'next/image'
import Head from "next/head"
import { sanityClient, urlFor } from "../sanity"
import Link from 'next/link'
import {Collection, address} from '../typings';
import GetServerSideProps from 'next';
interface props {
collections: Collection
}
const Home=({collections}: props) => {
return (
<div className='bg-yellow-400 max-auto flex min-h-screen flex-col py-10 px-10 '>
<Head>
<title>Ordinal Cats</title>
<link rel="stylesheet" href="/fevicon.ico" />
</Head>
<h1 className='w-52 text-xl font-extralight sm:w-80 py-5'>
<span className='font-extrabold underline decoration-orange-600/50'>Ordinal Cats</span>
</h1>
<main className='bg-orange-500 rounded-lg p-10 shadow-xl shadow-black items-center ' >
<div className='grid space-x-3 md:grid-cols-1 lg:grid-cols-1 2xl:grid-cols-4'>
{collections?.map(collection => (
<div key={collection.slug.current} className='flex flex-col items-center'>
<img className='h-70 w-50 rounded-2xl object-cover' src={urlFor(collection.mainImage).url()} alt="" />
<div>
<h2 className='text-3xl items-center text-center'>{collection.title}</h2>
<p className='mt-2 text-sm text-white text-center'>{collection.description}</p>
<Link href={`${collection.slug.current}`} >
<button className='cursor-pointer transition-all duration-200 hover:scale-105 h-16 bg-[#facf38] w-full text-Black rounded-full mt-2 font-bold disabled:bg-gray-400'>Mint</button>
</Link>
</div>
</div>
))}
</div>
</main>
</div>
)
}
export default Home
export const GetServerSideProps = async () => {
const query = `*[_type == "collection"]{
_id,
title,
address,
description,
nftCollectionName,
mainImage{
asset
},
previewImage {
asset
},
slug {
current
},
creator -> {
_id,
name,
address,
slug{
current
},
},
}`
const collections = await sanityClient.fetch(query)
return{
props: {
collections
}
}
}enter image description here
我的后端文件// typings.d.ts
interface Image{
asset: {
url: string
}
}
export interface Creator {
_id:string
name:string
address:string
slug:{
current:string
}
image:Image
bio:string
}
export interface Collection {
_id:string
title:string
description:string
nftCollectionName:string
address:string
slug:{
current:string
}
creator:Creator
mainImage:Image
previewImage:Image
}我的项目在本地主机上成功运行，没有任何错误，但当我运行“npm运行构建”时，它给了我一堆错误，我试图在vercel上部署它。但它显示npm运行构建退出1。请帮助我解决这个错误，我试图删除节点模块并重新安装包，但它不起作用。
我希望在主机上部署它。我的代码在我的本地主机系统中工作正常。但当我试图部署它时，它给我错误。它没有部署。
1条答案
按热度按时间z4iuyo4d1#
GetServerSideProps是getServerSideProps的类型所以你要构造这样的函数
请参阅此处的 typescript 文档
这也让我第一次使用它的时候很失望，需要一些时间来适应。