草稿模式

草稿模式 讓您可以在 Next.js 應用程式中預覽來自 Headless CMS 的草稿內容。這對於在建置時產生的靜態頁面非常有用，因為它允許您切換到動態渲染，並查看草稿變更，而無需重建整個網站。

本頁面將逐步說明如何啟用和使用草稿模式。

步驟 1：建立路由處理器

建立路由處理器。它可以有任何名稱，例如 app/api/draft/route.ts。

app/api/draft/route.ts

export async function GET(request: Request) {
  return new Response('')
}

然後，導入 draftMode 函式並呼叫 enable() 方法。

app/api/draft/route.ts

import { draftMode } from 'next/headers'
 
export async function GET(request: Request) {
  const draft = await draftMode()
  draft.enable()
  return new Response('Draft mode is enabled')
}

這將設定 cookie 以啟用草稿模式。後續包含此 cookie 的請求將觸發草稿模式，並變更靜態產生頁面的行為。

您可以透過手動訪問 /api/draft 並查看瀏覽器的開發者工具來手動測試。請注意 Set-Cookie 回應標頭，其中包含名為 __prerender_bypass 的 cookie。

步驟 2：從您的 Headless CMS 存取路由處理器

這些步驟假設您使用的 Headless CMS 支援設定自訂草稿 URL。如果它不支援，您仍然可以使用此方法來保護您的草稿 URL，但您需要手動建構和存取草稿 URL。具體步驟將根據您使用的 Headless CMS 而有所不同。

若要從您的 Headless CMS 安全地存取路由處理器

使用您選擇的權杖產生器建立密碼權杖字串。此密碼將僅為您的 Next.js 應用程式和您的 Headless CMS 所知。
如果您的 Headless CMS 支援設定自訂草稿 URL，請指定草稿 URL（這假設您的路由處理器位於 app/api/draft/route.ts）。例如

終端機

https://<your-site>/api/draft?secret=<token>&slug=<path>

<your-site> 應為您的部署網域。

<token> 應替換為您產生的密碼權杖。

<path> 應為您想要檢視的頁面路徑。如果您想要檢視 /posts/one，則應使用 &slug=/posts/one。

您的 Headless CMS 可能允許您在草稿 URL 中包含變數，以便可以根據 CMS 的資料動態設定 <path>，如下所示：&slug=/posts/{entry.fields.slug}

在您的路由處理器中，檢查密碼是否符合以及 slug 參數是否存在（如果沒有，請求應失敗），呼叫 draftMode.enable() 以設定 cookie。然後，將瀏覽器重新導向至 slug 指定的路徑

app/api/draft/route.ts

import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'
 
export async function GET(request: Request) {
  // Parse query string parameters
  const { searchParams } = new URL(request.url)
  const secret = searchParams.get('secret')
  const slug = searchParams.get('slug')
 
  // Check the secret and next parameters
  // This secret should only be known to this Route Handler and the CMS
  if (secret !== 'MY_SECRET_TOKEN' || !slug) {
    return new Response('Invalid token', { status: 401 })
  }
 
  // Fetch the headless CMS to check if the provided `slug` exists
  // getPostBySlug would implement the required fetching logic to the headless CMS
  const post = await getPostBySlug(slug)
 
  // If the slug doesn't exist prevent draft mode from being enabled
  if (!post) {
    return new Response('Invalid slug', { status: 401 })
  }
 
  // Enable Draft Mode by setting the cookie
  const draft = await draftMode()
  draft.enable()
 
  // Redirect to the path from the fetched post
  // We don't redirect to searchParams.slug as that might lead to open redirect vulnerabilities
  redirect(post.slug)
}

如果成功，則瀏覽器將重新導向至您想要檢視的路徑，並帶有草稿模式 cookie。

步驟 3：預覽草稿內容

下一步是更新您的頁面以檢查 draftMode().isEnabled 的值。

如果您請求設定了 cookie 的頁面，則資料將在請求時提取（而不是在建置時）。

此外，isEnabled 的值將為 true。

app/page.tsx

// page that fetches data
import { draftMode } from 'next/headers'
 
async function getData() {
  const { isEnabled } = await draftMode()
 
  const url = isEnabled
    ? 'https://draft.example.com'
    : 'https://production.example.com'
 
  const res = await fetch(url)
 
  return res.json()
}
 
export default async function Page() {
  const { title, desc } = await getData()
 
  return (
    <main>
      <h1>{title}</h1>
      <p>{desc}</p>
    </main>
  )
}

如果您從您的 Headless CMS 或手動使用 URL 存取草稿路由處理器（帶有 secret 和 slug），您現在應該能夠看到草稿內容。而且，如果您在不發佈的情況下更新草稿，您應該能夠檢視草稿。