Cosmic 헤드리스 CMS에서 Next.js 미리보기 모드를 사용하는 방법

정적 웹 페이지 생성은 headless CMS에서 데이터를 가져올 때 실용적입니다. 그러나 사이트가 구축된 후 CMS에 새 콘텐츠를 추가할 때 아직 게시할 준비가 되지 않은 초안 콘텐츠를 미리 볼 수 있는 방법이 필요합니다.

Next.js Preview Mode 을 사용하여 요청 시 페이지를 렌더링하여 이 문제를 해결하고 정적 생성 중에 존재하지 않은 게시되지 않은 콘텐츠를 볼 수 있습니다. 헤드리스 CMS와 함께 Next.js 미리보기 모드를 사용하여 우리 자신과 공동 작업자를 위해 초안 콘텐츠를 미리 볼 수 있는 방법을 살펴보겠습니다.



이 예에서는 헤드리스 CMS로 Cosmic을 사용하고 있습니다. live demo 및 clone the Developer Portfolio template GitHub repository 을 확인할 수 있습니다.

비밀 미리 보기 토큰 및 URL 설정

액세스 권한이 있는 사람만 미리 보기 URL을 볼 수 있도록 비밀 미리 보기 토큰에 대한 문자열을 생성해 보겠습니다. 이것을 사용하여API key generator base64 비밀 문자열을 얻거나 직접 만든 간단한 텍스트 문자열을 사용할 수 있습니다.

이제 Next.js 프로젝트의 'pages/api/preview.js'에 위치할 맞춤 미리보기 URL을 설정합니다.

  https://<YOUR-SITE>/api/preview?secret=<YOUR_SECRET_PREVIEW_TOKEN>&slug=[object_slug]

Cosmic에서 이 미리보기 URL을 설정하는 것은 쉽습니다. 개체 유형의 설정으로 이동하고 위의 규칙을 사용하여 미리보기 링크를 설정할 수 있습니다. 개발 중 테스트를 위해 localhost로 설정하거나 원하는 URL로 설정합니다. Cosmic을 사용하여 slug 매개변수를 [object_slug]로 설정합니다. Cosmic은 이 짧은 코드를 주어진 객체의 슬러그로 자동 변환합니다.

슬러그로 미리보기 게시물 가져오기

먼저 Cosmic NPM module을 사용하여 헤드리스 CMS에서 미리보기 게시물 데이터를 가져오는 비동기 함수를 생성해 보겠습니다.

const Cosmic = require('cosmicjs')
const api = Cosmic()

const bucket = api.bucket({
  slug: YOUR_BUCKET_SLUG,
  read_key: YOUR_READ_KEY,
})
const is404 = error => /not found/i.test(error.message)

export async function getPreviewPostBySlug(slug) {
  const params = {
    query: { slug },
    status: 'any',
    props: 'slug',
  }

  try {
    const data = await bucket.getObjects(params)
    return data.objects[0]
  } catch (error) {
    // Don't throw if a slug doesn't exist
    if (is404(error)) return
    throw error
  }
}

상태 매개변수를 any로 설정하면 요청 시 게시된 개체의 최신 초안뿐만 아니라 초안 상태의 게시되지 않은 모든 개체를 가져옵니다.

미리보기 API 경로 만들기

이제 CMS에서 비밀 미리보기 토큰을 구성했으므로 토큰이 일치하는지 확인한 다음 이전에 설정한 미리보기 URL(있는 경우)로 요청한 게시되지 않은 게시물을 가져오는 API 경로를 만듭니다.

토큰이 일치하고 요청한 슬러그가 CMS에 존재하면 미리 보기 모드를 활성화하고 Temporary Redirect을 사용하여 res.setPreviewData({})로 쿠키를 게시되지 않은 게시물의 위치로 설정합니다.

export default async function preview(req, res) {
  // Check the secret and next parameters
  // This secret should only be known to this API route and the CMS
  if (
    req.query.secret !== process.env.COSMIC_PREVIEW_SECRET ||
    !req.query.slug
  ) {
    return res.status(401).json({ message: 'Invalid token' })
  }

  // Fetch the headless CMS to check if the provided `slug` exists
  const post = await getPreviewPostBySlug(req.query.slug)

  // If the slug doesn't exist prevent preview mode from being enabled
  if (!post) {
    return res.status(401).json({ message: 'Object not found' })
  }

  // Enable Preview Mode by setting the cookies
  res.setPreviewData({})

  // Redirect to the path from the fetched post
  // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
  res.writeHead(307, { Location: `/posts/${post.slug}` })
  res.end()
}

getStaticProps 업데이트

res.setPreviewData로 미리보기 모드 쿠키를 설정했으므로 요청 시 getStaticProps 이 호출됩니다.

미리 보기 게시물을 렌더링하는 페이지에서 getStaticProps는 객체를 인수로 허용하며, 이는 헤드리스 CMS에서 가져온 게시되지 않은 데이터입니다.

export async function getStaticProps({ params, preview = null }) {
  const data = await getPostAndMorePosts(params.slug, preview)
  return {
    props: {
      preview,
      post: {
        ...data.post,
      },
    },
  }
}

Cosmic에서 미리보기 모드 사용

이제 미리 보기 모드에 대한 API 경로 및 기능을 설정했으므로 Cosmic과 함께 사용하는 것은 버튼을 클릭하는 것만큼 쉽습니다. Cosmic은 이전에 설정한 미리보기 URL을 사용하여 생성한 각 개체에 대한 쿼리를 생성하고 개체 슬러그를 끝에 자동으로 추가합니다.

미리보기 모드 종료

미리보기 모드를 종료하기 위해 API 경로를 하나 더 생성할 수 있습니다. 미리 보기 쿠키를 지우고 홈 페이지로 리디렉션합니다.

export default async function exit(_, res) {
  // Exit the current user from "Preview Mode". This function accepts no args.
  res.clearPreviewData()

  // Redirect the user back to the index page.
  res.writeHead(307, { Location: '/' })
  res.end()
}

애플리케이션의 현재 세션에 대한 쿠키를 설정하고 있으므로 이 데이터를 전체 앱의 컨텍스트로 취급할 수 있습니다. 이 자습서에서 사용된 live demo에서 응용 프로그램이 미리 보기 모드일 때 표시되는 배너를 만들었습니다. 그런 다음 배너에서 Next.js Link을 사용하여 exit-preview API 경로로 라우팅하여 미리보기 모드 쿠키를 지우고 애플리케이션을 홈 페이지로 다시 가져옵니다.



새로운 콘텐츠를 팀과 공유하고 싶거나 단순히 자신의 콘텐츠를 공개하기 전에 확인하고 싶은 경우 Next.js 미리보기 모드를 사용하는 것이 확실한 솔루션입니다. 콘텐츠 공유는 팀에 미리보기 URL을 제공하거나 Cosmic에서 버튼을 클릭하는 것만큼 쉽습니다.

이 기사가 도움이 되었기를 바랍니다. 헤드리스 CMS, Next.js, React 등의 모든 것을 다루는 새로운 쇼Build Time를 시청할 수 있습니다.