Prismic

1. 언제 Prismic을 사용하면 좋을까?

Prismic은 Headless CMS로, 정적인 웹사이트나 동적인 웹 애플리케이션에서 콘텐츠를 유연하게 관리할 때 적합해. 다음과 같은 경우에 특히 효과적이다.

• 마케터나 콘텐츠 팀이 자주 콘텐츠를 수정하는 경우
  → 개발자가 개입하지 않고, 비개발자가 직접 관리 페이지에서 콘텐츠를 수정할 수 있다.
• Next.js, Nuxt.js 등과 함께 정적인 페이지를 생성할 때 (SSG, ISR)
  → 정적 생성(Static Site Generation)과 궁합이 좋아서 빠른 로딩 속도를 유지할 수 있다.
• 다국어 지원이 필요한 경우
  → 다국어 콘텐츠 관리를 손쉽게 할 수 있는 기능이 제공된다.
• 반복적인 페이지 템플릿을 사용할 때
  → 블로그, 제품 페이지, 랜딩 페이지 같은 템플릿화된 페이지를 구성할 때 편리한다.
• API 기반으로 다양한 플랫폼에서 콘텐츠를 사용할 때
  → REST API & GraphQL API를 제공하므로 웹뿐만 아니라 모바일 앱에서도 동일한 콘텐츠를 활용 가능.

 

• Prismic이 적합한 경우
  • 마케터가 직접 콘텐츠를 관리해야 하는 경우
  • Next.js, Nuxt.js 같은 최신 프레임워크를 사용할 경우
  • 빠르게 배포하고 운영할 CMS가 필요한 경우
  • 다국어 지원이 필요한 경우
• 다른 CMS가 적합한 경우
  • 대기업용 솔루션이 필요하면? → Contentful
  • 더 많은 커스터마이징이 필요하면? → Strapi
  • 실시간 협업이 필요하면? → Sanity
  • 블로그 중심이라면? → Ghost

---

 

 

1. Prismic 설정

1.1 Prismic 계정 생성 및 리포지토리 생성

1. Prismic 사이트 접속: Prismic
2. 무료 계정 생성
3. 새로운 리포지토리(repository) 생성
   • 프로젝트 이름 설정
   • "Starter project" 선택 가능하지만, 직접 설정할 거라면 빈 상태로 시작

Prismic: Headless Page Builder - Launch and Iterate Faster

 

---

2. Next.js 프로젝트 설정

2.1 Next.js 프로젝트 생성

npx create-next-app my-prismic-app
cd my-prismic-app

2.2 Prismic SDK 설치

npm install @prismicio/client @prismicio/react

2.3 Prismic 프로젝트와 연결

1. .env.local 파일을 만들고, Prismic 리포지토리 주소 추가:

   PRISMIC_REPOSITORY_NAME=your-repo-name
   

2. prismicio.js 파일 생성 (Prismic 클라이언트 설정)

   import * as prismic from "@prismicio/client";
   
   export const repositoryName = process.env.PRISMIC_REPOSITORY_NAME;
   
   export const client = prismic.createClient(repositoryName, {
     accessToken: "", // 필요하면 API 토큰 추가
   });
   

---

3. Prismic에서 데이터 가져오기

3.1 Prismic에서 문서 타입 생성

1. Prismic 대시보드에서 Custom Types 이동
2. 새 문서 타입 생성 (Page 등)
3. 필요한 필드 추가 (예: title, content 등)

---

3.2 데이터 가져와서 페이지에 출력

pages/index.js 수정:

import { client } from "../prismicio";

export default function Home({ page }) {
  return (
    <div>
      <h1>{page.data.title}</h1>
      <p>{page.data.content}</p>
    </div>
  );
}

// getStaticProps 사용 (SSG)
export async function getStaticProps() {
  const page = await client.getSingle("page"); // "page"는 Prismic에서 만든 문서 타입

  return {
    props: { page },
    revalidate: 60, // ISR 사용 가능
  };
}

---

4. Prismic Slice 활용 (컴포넌트화된 콘텐츠)

Prismic의 Slice Machine 기능을 사용하면 동적인 컴포넌트를 쉽게 추가할 수 있어.

4.1 Slice Machine 설치

npx @slicemachine/init

• 설치 후 Prismic에서 자동으로 Slices 폴더가 생성됨

4.2 Slice 사용하기

1. components/Slices/MySlice.js 생성

export default function MySlice({ slice }) {
  return (
    <div>
      <h2>{slice.primary.title}</h2>
      <p>{slice.primary.description}</p>
    </div>
  );
}

1. Prismic에서 Slice 추가 후, pages/index.js에서 불러오기:

---

 

더 복잡한 기능이 필요하면 Prismic API, GraphQL, Webhooks 등을 활용할 수도 있다.