Lead Software Engineer @ProtoPie
Microsoft MVP
TypeScript Korea User Group Organizer
Marktube (Youtube)
이 웅재
1-1) What is Sanity?
1-2) Sanity Project 만들고 Deploy 하기
1-3) Schema 만들기 (1) - author
1-4) Schema 만들기 (2) - post
1-5) Schema 만들기 (3) - home
1-6) Schema 만들기 (4) - blockContent
1-7) Studio 의 input 창 커스터마이징
1-8) query 사용하기
Sanity
Studio
Sanity
Dataset
Client
(Next.js)
GROQ query
GraphQL
npm i @sanity/cli -g
sanity login
mkdir my-blog-contents
cd my-blog-contents
sanity init
sanity start
sanity deploy
// schemas/author.js
export default {
name: "author",
title: "Author",
type: "document",
fields: [
{
name: "name",
title: "Name",
type: "string",
validation: (Rule) => Rule.required(),
},
{
name: "role",
title: "Role",
type: "string",
},
{
name: "image",
title: "Image",
type: "image",
options: {
hotspot: true,
},
validation: (Rule) => Rule.required(),
},
],
preview: {
select: {
title: "name",
media: "image",
},
},
};
*[_type == 'home'][0]{'mainPostUrl': mainPost -> slug.current}
*[_type == 'post']{
title,
subtitle,
createdAt,
'content': content[]{
...,
...select(_type == 'imageGallery' => {'images': images[]{..., 'url': asset -> url}})
},
'slug': slug.current,
'thumbnail': {
'alt': thumbnail.alt,
'imageUrl': thumbnail.asset -> url
},
'author': author -> {
name,
role,
'image': image.asset -> url
},
'tag': tag -> {
title,
'slug': slug.current
}
}
2-1) What is Next.js?
2-2) Next.js 프로젝트 만들기
2-3) 라우팅 설정하기
2-4) Sanity 연결하고 데이터 가져오기
2-5) 스타일 작업 (1) - Blog Home
2-6) 스타일 작업 (2) - Post
2-7) next.config.js
2-8) Next.js 배포 이해하기