M

MLOG

한국어

Next.js Draft Mode로 원활한 콘텐츠 미리보기를 경험하세요. 콘텐츠 제작자의 역량을 강화하고, 협업을 개선하며, 글로벌 사용자를 위한 콘텐츠 품질을 보장하는 방법을 알아보세요.

Next.js Draft Mode: 글로벌 팀을 위한 콘텐츠 미리보기 간소화

오늘날 빠르게 변화하는 디지털 환경에서 고품질의 매력적인 콘텐츠를 제공하는 것은 성공에 매우 중요합니다. 글로벌 팀의 경우, 이는 종종 여러 플랫폼에 걸쳐 콘텐츠를 관리하고 다양한 언어와 지역에서 일관성을 보장하는 것을 포함합니다. Next.js Draft Mode는 콘텐츠 미리보기 워크플로우를 간소화하고, 콘텐츠 제작자의 역량을 강화하며, 협업을 개선하는 강력한 솔루션을 제공합니다.

Next.js Draft Mode란 무엇인가요?

Next.js Draft Mode를 사용하면 Next.js의 정적 생성(static generation) 또는 서버 사이드 렌더링을 우회하고 페이지를 온디맨드(on-demand)로 렌더링할 수 있어, 콘텐츠 변경 사항을 게시하기 전에 실시간으로 미리 볼 수 있습니다. 이는 콘텐츠 업데이트를 라이브로 전환하기 전에 검토하고 승인해야 하는 콘텐츠 관리 시스템(CMS)과 함께 작업할 때 특히 유용합니다.

도쿄의 마케팅 팀이 북미 고객을 대상으로 하는 웹사이트의 홈페이지를 업데이트하는 시나리오를 상상해 보세요. Draft Mode를 사용하면 변경 사항을 즉시 미리 볼 수 있어 콘텐츠가 정확하고, 매력적이며, 문화적으로 적절한지 게시하기 전에 확인할 수 있습니다. 이러한 실시간 피드백 루프는 오류의 위험을 크게 줄이고 콘텐츠의 전반적인 품질을 향상시킵니다.

Next.js Draft Mode 사용의 이점

Next.js 애플리케이션에 Draft Mode를 구현하면 다음과 같은 몇 가지 주요 이점을 얻을 수 있습니다:

Next.js Draft Mode 구현 방법

Next.js 애플리케이션에 Draft Mode를 구현하는 데는 몇 가지 주요 단계가 포함됩니다:

1. CMS 구성하기

첫 번째 단계는 Draft Mode를 지원하도록 CMS를 구성하는 것입니다. Contentful, Sanity, Strapi와 같은 대부분의 최신 헤드리스 CMS 플랫폼은 Draft Mode에 대한 내장 지원을 제공합니다. 활성화 방법에 대한 구체적인 지침은 CMS 설명서를 참조하세요.

예를 들어 Contentful을 사용하는 경우 미리보기 환경을 위한 별도의 API 키를 생성해야 합니다. 이 API 키를 사용하면 라이브 환경에 영향을 주지 않고 Contentful에서 초안 콘텐츠를 가져올 수 있습니다.

2. Draft Mode 활성화를 위한 API 라우트 생성하기

다음으로, Next.js 애플리케이션에서 Draft Mode를 활성화하는 API 라우트를 생성해야 합니다. 이 라우트는 일반적으로 CMS로부터 비밀 토큰을 받아 승인된 사용자만 Draft Mode에 들어갈 수 있도록 합니다.

다음은 Draft Mode를 활성화하는 API 라우트의 예시입니다:


// pages/api/draft.js

import { enablePreview } from '../../utils/draft'

export default async function handler(req, res) {
  // 비밀 토큰과 슬러그를 확인합니다
  // 이 비밀 토큰은 이 API 라우트와 CMS만 알고 있어야 합니다.
  if (req.query.secret !== process.env.CONTENTFUL_PREVIEW_SECRET) {
    return res.status(401).json({ message: 'Invalid token' })
  }

  // 쿠키를 설정하여 Draft Mode를 활성화합니다
  res.setPreviewData({})

  // Draft Mode 활성화 후 홈페이지로 리디렉션합니다
  res.redirect('/')
  res.end()
}

이 코드 스니펫은 기본적인 API 엔드포인트를 보여줍니다. 중요한 점은 `CONTENTFUL_PREVIEW_SECRET` 환경 변수가 요청의 쿼리 매개변수와 비교된다는 것입니다. 만약 일치하면, `res.setPreviewData({})`가 쿠키를 통해 Draft Mode를 활성화합니다. 마지막으로, 사용자는 홈페이지로 리디렉션됩니다.

3. 초안 콘텐츠 가져오기

이제 Draft Mode를 활성화했으므로, Draft Mode가 활성화되었을 때 초안 콘텐츠를 가져오도록 데이터 가져오기 로직을 업데이트해야 합니다. `getStaticProps` 또는 `getServerSideProps`에서 제공하는 `preview` prop을 사용하여 Draft Mode가 활성화되었는지 확인할 수 있습니다.

`getStaticProps`에서 초안 콘텐츠를 가져오는 방법의 예시는 다음과 같습니다:


export async function getStaticProps({ preview = false }) {
  const post = await getPostBySlug(slug, preview)

  return {
    props: {
      post,
      preview,
    },
  }
}

이 예제에서 `getPostBySlug` 함수는 `preview` prop이 `true`로 설정된 경우 초안 콘텐츠를 가져옵니다. `preview` prop은 Draft Mode가 활성화되면 `getStaticProps`에 자동으로 전달됩니다.

`getPostBySlug` 내부에서는 일반적으로 초안 항목을 포함하도록 CMS 쿼리를 수정합니다. Contentful의 경우, 이는 API 요청에 `preview: true`를 포함하는 것을 의미합니다.

4. 초안 콘텐츠 표시하기

마지막으로, Draft Mode가 활성화되었을 때 초안 콘텐츠를 표시하도록 컴포넌트를 업데이트해야 합니다. `preview` prop을 사용하여 Draft Mode 활성화 여부에 따라 조건부로 다른 콘텐츠를 렌더링할 수 있습니다.

React 컴포넌트에서 초안 콘텐츠를 표시하는 방법의 예시는 다음과 같습니다:


function Post({ post, preview }) {
  return (
    

      
{post.title}

      {preview && (
        
Draft Mode 활성화됨

      )}
      
{post.content}

    

  )
}

이 코드 스니펫은 `preview` prop을 확인합니다. 만약 true이면, Draft Mode가 활성화되었음을 나타내는 메시지가 표시됩니다. 이를 통해 콘텐츠 제작자는 초안과 게시된 콘텐츠를 명확하게 구분할 수 있습니다.

예시: 글로벌 이커머스 플랫폼의 콘텐츠 관리

여러 국가에서 제품을 판매하는 글로벌 이커머스 플랫폼을 생각해 보세요. 이 플랫폼은 다양한 언어로 제품 설명, 프로모션 배너, 마케팅 캠페인을 관리해야 합니다.

Next.js Draft Mode를 사용하면 각 지역의 콘텐츠 제작자가 변경 사항을 게시하기 전에 미리 볼 수 있어, 콘텐츠가 정확하고 문화적으로 적절하며 타겟 고객에 최적화되었는지 확인할 수 있습니다. 예를 들면 다음과 같습니다:

지역 팀이 게시 전에 콘텐츠를 미리 볼 수 있게 함으로써, Draft Mode는 플랫폼이 전 세계 고객에게 일관되고 고품질의 경험을 제공하도록 돕습니다.

Next.js Draft Mode 사용을 위한 모범 사례

Next.js Draft Mode를 최대한 활용하려면 다음 모범 사례를 고려하세요:

일반적인 과제와 해결책

Next.js Draft Mode는 수많은 이점을 제공하지만, 구현 중에 마주칠 수 있는 몇 가지 일반적인 과제도 있습니다:

Next.js Draft Mode의 대안

Next.js Draft Mode는 강력한 도구이지만, 고려해 볼 만한 다른 콘텐츠 미리보기 접근 방식도 있습니다:

결론

Next.js Draft Mode는 콘텐츠 미리보기 워크플로우를 간소화하고, 콘텐츠 제작자의 역량을 강화하며, 글로벌 팀의 협업을 개선하는 데 유용한 도구입니다. Draft Mode를 구현함으로써 콘텐츠가 게시되기 전에 정확하고, 매력적이며, 문화적으로 적절한지 확인할 수 있으며, 궁극적으로 더 나은 사용자 경험과 향상된 비즈니스 성과로 이어질 수 있습니다. 모범 사례를 신중하게 고려하고 일반적인 과제를 해결함으로써 Next.js Draft Mode의 잠재력을 최대한 발휘하고 콘텐츠 제작 프로세스를 혁신할 수 있습니다.

글로벌 팀을 위한 원활하고 효율적인 콘텐츠 관리 프로세스를 보장하기 위해 항상 보안, 성능, 그리고 명확한 콘텐츠 승인 워크플로우를 우선시하는 것을 기억하세요.