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
}
}
}
My Backend File // 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
}
Everything is working in my local environment without any issues. However, when I try to deploy the project on Vercel by running 'npm run build', it encounters multiple errors and exits with code 1. I have attempted to remove node modules and reinstall packages, but the issue persists. Any assistance would be greatly appreciated.
I am trying to successfully deploy my project on a hosting platform like Vercel. While the code functions flawlessly locally, deployment is met with errors that prevent successful hosting. Your help in resolving these errors would be invaluable to me.