🚀 설치
오른쪽 상단 Get started 로 들어가서 원하는 계정으로 로그인을 해준다.
오른쪽 상단을 보면 알 수 있듯 자동으로 프로젝트가 생성된다.
지금 뭘 만들고 있냐는 질문이 있다. 체크해준다.
완료되면 위처럼 명령어가 나온다.
어디에다가 설치할까?
Sanity Studio를 Next.js 프로젝트 내부에서 생성할 것인지, 외부 독립적인 폴더에 생성할 것인가는 선택사항이다. 이는 Sanity Studio가 Next.js 어플리케이션 실행에 필수적인 요소가 아니기 때문이다.
따라서 백엔드 폴더를 따로 만들어서 그곳에서 관리해줘도 되지만 나는 하나의 깃 레파지토리로 관리해주기 위해 프로젝트 내부에 만들 것이다.
해당 명령어를 미리 만들어둔 프로젝트 터미널에 입력해준다.
create-sanity 라는 package 를 설치할 것인가를 묻는다. y 를 눌러준다.
로그인 타입을 묻고 있다. sanity 에서 프로젝트를 생성했던 계정의 타입을 선택하면 된다.
선택하면 브라우저 창에 로그인 할 수 있는 윈도우가 나오는데, sanity 에서 로그인 했던 계정을 선택하면 된다.
다시 터미널로 돌아와 보면
프로젝트 어디 경로에다가 만들 것인지를 묻는다. 현재 경로에다가 sanity-studio 라는 이름으로 만들 것이기 때문에 ./sanity-studio 라고 적어준다.
해당 프로젝트 내에 sanity-studio 폴더가 생겼다.
sanity studio 에서 쓸 패키지 매니저를 고르라고 한다. 본인이 사용하는 것으로 자유롭게 선택해주면 된다.
설치 과정 중 발생했던 에러들 🤬
npm 은 정상적으로 설치가 되는데 yarn 은 안 되는 불상사가 발생.
🚨 Usage Error: The nearest package directory (/Users/jeongdain/Desktop/무제 폴더/my-app/sanity-studio) doesn't seem to be part of the project declared in /Users/jeongdain/Desktop/무제 폴더/my-app.
해결방법은 의외로 간단하다.
yarn.lock 과 package.json, package-lock.json 전부 제거해주면 된다.
그리고 앞서 생성됐던 sanity-studio 폴더를 삭제한 다음
여기에서 사용했던 명령어를 터미널에 입력한다.
앞서 했던 설치 과정을 반복하면 된다.
🚨 Usage Error: No project found in (...)
위에서 yarn.lock 과 package.json, package-lock.json 를 제거해줬기 때문에 yarn install 이 되지 않았다.
1
우선 npx create-next-app@latest --experimental-app 이 완료된 폴더를 두 개 준비한다.
2
yarn.lock 과 package.json, package-lock.json 을 복붙해준다. (이때, 삭제하기 전의 디펜던시들이 다 똑같이 들어있어야 한다!)
다시 yarn install 을 시도하면 정상적으로 설치되는 것을 확인할 수 있다.
🚨 [postcss] Cannot read properties of undefined (reading 'config'),
만약 테일윈드 같은 게 깔려있다면 다음과 같은 오류가 난다.
나의 경우 테일윈드가 깔려있었다.
tailwind.config.js 를 sanity-studio 최상위 경로에 복붙한다.
🚨 Internal server error: Failed to load PostCSS config
그래도 여전히 오류가 발생하는 경우 sanity-studio 최상위 경로에 있는 tailwind.config.js 를 postcss.config.js 로 바꿔주면 된다.
프로젝트가 성공적으로 세팅되면 http://localhost:3333/ 에 들어가서 정상적으로 작동중인지 확인해볼 수 있다.
참고
[Sanity 설치 관련]
드림코딩 엘리
[Sanity 에러 관련]
