A simple small project to get familiar with Sanity CMS and all it's features.
This project is an exploration of next.js and Sanity CMS combined. It is meant to be used as a learning tool for implementing Sanity, using it for CRUD operations and back-end content management.
Setup an account at https://www.sanity.io/
Start a new project on the dashboard, and for your first project copy the CLI they provide.
It will connect your local environment to your dashboard.
If it is your 2nd project follow the setup below:
- Create Next.js typescript application
npx create-next-app@latest sanity-basic --typescript --tailwind --eslint
![next-setup](https://private-user-images.githubusercontent.com/126743500/299716068-d5430e5e-2232-4070-a9da-f8dc9d89495c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMjk3NjUsIm5iZiI6MTcyNDMyOTQ2NSwicGF0aCI6Ii8xMjY3NDM1MDAvMjk5NzE2MDY4LWQ1NDMwZTVlLTIyMzItNDA3MC1hOWRhLWY4ZGM5ZDg5NDk1Yy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODIyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyMlQxMjI0MjVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wMGJkNDFkZTFkZmE2NDQ3Mjk5NjBhMjkxOGU2NjlhMGNhN2M0YWNlOWMxN2IyOGQyMmY1MDY5YTAxZTAwYjRhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.mJ_XfcRZH2cYyZdKDI6Zs8He7OWuBQbn4oCR865-De4)
- Create Sanity Project and connect to your Sanity dashboard
npm -y create sanity@latest
![next-setup](https://private-user-images.githubusercontent.com/126743500/299716854-b4b0549f-29a1-42bd-aa8f-70639381a24b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMjk3NjUsIm5iZiI6MTcyNDMyOTQ2NSwicGF0aCI6Ii8xMjY3NDM1MDAvMjk5NzE2ODU0LWI0YjA1NDlmLTI5YTEtNDJiZC1hYThmLTcwNjM5MzgxYTI0Yi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODIyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyMlQxMjI0MjVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hNGJjYTQzOWYwZjU3NzFiNTljMDhhM2ZhMmJmMzEyZjA5NDI2NDY0MGMyZTQ3MjI0MmQ5NmYxMzI3NzNmM2NjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.ZXsgYoEBdHYg4nzeX6pI0QlbUmUrdiV5SUm0PeXTuRg)
- Not sure if this is something wrong on my end, or what. Will update this section if I figure it out. But need to add quotes to the tsconfig.json target.
![next-setup](https://private-user-images.githubusercontent.com/126743500/299717747-e29c683f-d769-4b48-a93e-2fe5d840ce29.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMjk3NjUsIm5iZiI6MTcyNDMyOTQ2NSwicGF0aCI6Ii8xMjY3NDM1MDAvMjk5NzE3NzQ3LWUyOWM2ODNmLWQ3NjktNGI0OC1hOTNlLTJmZTVkODQwY2UyOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODIyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyMlQxMjI0MjVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03NTk0MThjZDk1YmFkNmE3ZjI2NmI3ODJlYWIyODI5OTkyMGU0YmQ4MDdmNjI5MmFkMjRhMjlmODA3NGYzYWI0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.AeuyT4WKDekd_OYe31Vgpu3S93_evca4H1z0B-ltMk4)
On the backend sanity schamas are setup, similar to react form schemas. These schemas are automatically added to the database and the content management system once built. To access the data on the front-end Sanity uses GROQ queries. These are simple strings attached to a fetch query that selective read the values in the string.