📝 Next.js Draft Mode 사용 가이드

📝 Next.js Draft Mode 사용 가이드

Next.js의 Draft Mode는 미리보기 상태로 콘텐츠를 확인할 수 있는 기능입니다.
Draft Mode를 사용하면 CMS와 연동하여 미리보기 페이지를 쉽게 구성할 수 있습니다.
이 가이드를 통해 Draft Mode 설정과 활용 방법을 단계별로 알아보겠습니다.

---

✅ 1. Draft Mode란?

Draft Mode는 정적 페이지를 미리보기 모드로 전환하여 콘텐츠를 실시간으로 확인할 수 있는 기능입니다.
정적 사이트 생성(SSG)에서 실시간 미리보기를 제공할 때 유용합니다.

---

✅ 2. Draft Mode 활성화

설정 방법

Draft Mode를 활성화하기 위해 Next.js의 res 객체를 사용합니다.
미리보기 모드를 활성화하는 API를 생성합니다.

// app/api/draft/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const response = NextResponse.json({ message: 'Draft mode 활성화' });
  response.cookies.set('NEXT_PUBLIC_DRAFT_MODE', 'true', {
    httpOnly: true,
    path: '/',
  });
  return response;
}

비활성화 API

// app/api/exit-draft/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const response = NextResponse.json({ message: 'Draft mode 비활성화' });
  response.cookies.set('NEXT_PUBLIC_DRAFT_MODE', '', {
    httpOnly: true,
    path: '/',
    maxAge: -1,
  });
  return response;
}

---

✅ 3. Draft Mode 페이지 처리

페이지 내에서 Draft Mode 상태 확인

// app/page.tsx
import { cookies } from 'next/headers';

export default function HomePage() {
  const draftMode = cookies().get('NEXT_PUBLIC_DRAFT_MODE');

  if (draftMode?.value) {
    return <h1>📝 Draft Mode 활성화 중</h1>;
  }

  return <h1>정상 모드 페이지</h1>;
}

활성화 및 비활성화 버튼

반응형

// app/components/DraftToggle.tsx
export default function DraftToggle() {
  const enableDraft = async () => {
    await fetch('/api/draft');
    window.location.reload();
  };

  const disableDraft = async () => {
    await fetch('/api/exit-draft');
    window.location.reload();
  };

  return (
    <div>
      <button onClick={enableDraft}>Draft 모드 켜기</button>
      <button onClick={disableDraft}>Draft 모드 끄기</button>
    </div>
  );
}

---

✅ 4. Draft Mode를 활용한 실시간 미리보기

CMS와 연결하여 실시간 미리보기를 구성할 수 있습니다.

예: Sanity와 연동

1. Sanity에서 미리보기 URL 설정:
   • /api/draft?slug=my-page 형태로 설정
2. Next.js API에서 처리

// app/api/draft/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const slug = searchParams.get('slug');

  if (!slug) {
    return NextResponse.json({ message: '잘못된 요청' }, { status: 400 });
  }

  const response = NextResponse.redirect(`/${slug}`);
  response.cookies.set('NEXT_PUBLIC_DRAFT_MODE', 'true', {
    httpOnly: true,
    path: '/',
  });
  return response;
}

페이지에서 미리보기 확인

// app/[slug]/page.tsx
import { cookies } from 'next/headers';

export default function Page({ params }: { params: { slug: string } }) {
  const draftMode = cookies().get('NEXT_PUBLIC_DRAFT_MODE');

  return (
    <div>
      <h1>{params.slug} 페이지</h1>
      {draftMode?.value && <p>Draft 모드가 활성화되었습니다.</p>}
    </div>
  );
}

---

✅ 5. Draft Mode 주의사항

• SEO 유의: Draft Mode 페이지가 검색엔진에 노출되지 않도록 설정 필요
• 캐싱 문제: 캐시 무효화를 통해 최신 콘텐츠를 미리보기로 제공
• 보안 고려: 무분별한 활성화를 막기 위해 관리자 전용으로 설정

---

✅ 6. 배포 시 고려사항

Draft Mode는 개발 환경 또는 미리보기 서버에서만 사용해야 합니다.
프로덕션 환경에서는 미리보기 모드가 노출되지 않도록 주의해야 합니다.

환경 변수 설정

NEXT_PUBLIC_DRAFT_MODE=false

조건부 렌더링

if (process.env.NEXT_PUBLIC_DRAFT_MODE !== 'true') {
  return <h1>Draft Mode 사용 불가</h1>;
}

---

✅ 요약

기능 설명

Draft Mode 활성화	/api/draft 엔드포인트를 통해 활성화
Draft Mode 비활성화	/api/exit-draft 엔드포인트로 종료
상태 확인 및 렌더링	쿠키를 통해 현재 모드 확인
실시간 미리보기 활용	CMS 연동하여 초안 콘텐츠 미리보기
배포 환경 고려사항	프로덕션에서 활성화되지 않도록 설정

---

 

Next.js, Draft Mode, 실시간 미리보기, CMS 연동, 쿠키 관리, API 설정, 개발 환경, 미리보기 모드, 콘텐츠 미리보기, SEO 고려사항