- Install NextJS →
npx create-next-app@latest
- Install Sanity →
npm create sanity@latest
- Atention on say No to app directory on sanity installation
- Allow CORS origin on https://www.sanity.io/manage
- Change
.env
to.env.local
, and configure thedataset
andprojectID
- Add images next.config file
-
// next.config.ts /** @type {import('next').NextConfig} */ const nextConfig = {}; module.exports = { images: { remotePatterns: [ { protocol: "https", hostname: "cdn.sanity.io", port: "", }, ], }, };
-
- Create a Schema on
sanity/schemas/
-
export default { name: 'pet', type: 'document', title: 'Pet', fields: [ { name: 'name', type: 'string', title: 'Name' }, { name: 'image', type: 'image', title: 'Image', options: { hotspot: true } } ] }
-
- Add on schema.js
-
import pet from './pet' export const schemaTypes = [pet]
-
- Create content on
/studio
- Fetch the content
-
import { client } from '../../sanity/lib/client'; ... export async function getStaticProps() { const pet = await client.fetch(`*[_type == "pet"]`); //console.log(pet); return { props: { pet } } }
-
- Remember to fetch the first array after pass the object to the component
-
const Pet = ({pet}) => { const { _id, name, image } = pet[0]; ... }
-
- ❗To use images you need to use this method urlForImage().url()
-
import { urlForImage } from '../../sanity/lib/image'; ... <Image src={urlForImage(image).url()} alt={name} width={400} height={400} /> ...
-
- Document with nested array of object images
export default {
title: 'Featured',
name: 'featured',
type: 'document',
fields: [
{
name: 'title',
type: 'string',
title: 'Title',
description: "Title of the featured",
validation: (Rule) => Rule.required()
},
{
name: 'images',
type: 'array',
title: 'Images',
description: "Upload 7 pictures and links",
of: [
{
type: 'object',
name: 'imageWithDescription',
title: 'Image with Description',
fields: [
{
name: 'image',
type: 'image',
title: 'Image',
options: { hotspot: true },
validation: (Rule) => Rule.required()
},
{
name: 'link',
type: 'string',
title: 'Link',
description: "Link url",
validation: (Rule) => Rule.required()
},
]
}
],
validation: (Rule) => Rule.required().min(7).max(7).error('You must provide 7 images.')
},
],
}