Next.jsのDraft Modeを利用して、プレビュー環境を作成する

.env.local

1NEWT_SPACE_UID=your-space-uid
2NEWT_CDN_API_TOKEN=xxxxxxxxxxxxxxx
3NEWT_API_TOKEN=xxxxxxxxxxxxxxx
4NEWT_PREVIEW_SECRET=hogehoge

lib/newt.ts

1import 'server-only'
2import { createClient } from 'newt-client-js'
3import { cache } from 'react'
4import type { Article } from '@/types/article'
5
6// Newt CDN APIのクライアント（公開コンテンツのみ取得）
7const cdnClient = createClient({
8  spaceUid: process.env.NEWT_SPACE_UID + '',
9  token: process.env.NEWT_CDN_API_TOKEN + '',
10  apiType: 'cdn',
11})
12
13// Newt APIのクライアント（全コンテンツ取得）
14const apiClient = createClient({
15  spaceUid: process.env.NEWT_SPACE_UID + '',
16  token: process.env.NEWT_API_TOKEN + '',
17  apiType: 'api',
18})
19
20export const getArticles = cache(async () => {
21  const { items } = await cdnClient.getContents<Article>({
22    appUid: 'blog',
23    modelUid: 'article',
24    query: {
25      select: ['_id', 'title', 'slug', 'body'],
26    },
27  })
28  return items
29})
30
31export const getArticleBySlug = cache(
32  async (slug: string, isDraft: boolean) => {
33    const client = isDraft ? apiClient : cdnClient
34    const article = await client.getFirstContent<Article>({
35      appUid: 'blog',
36      modelUid: 'article',
37      query: {
38        slug,
39        select: ['_id', 'title', 'slug', 'body'],
40      },
41    })
42    return article
43  }
44)

app/api/draft/route.ts

1import { draftMode } from 'next/headers'
2import { redirect } from 'next/navigation'
3import { getArticleBySlug } from '@/lib/newt'
4
5export async function GET(request: Request) {
6  const { searchParams } = new URL(request.url)
7  const secret = searchParams.get('secret')
8  const slug = searchParams.get('slug')
9
10  // secretを検証する、slugパラメータの有無を検証する
11  if (secret !== process.env.NEWT_PREVIEW_SECRET || !slug) {
12    return new Response('Invalid token', { status: 401 })
13  }
14
15  // slugと対応するコンテンツがあるか検証する
16  const article = await getArticleBySlug(slug, true)
17  if (!article) {
18    return new Response('Invalid slug', { status: 401 })
19  }
20
21  // Cookieを設定し、ドラフトモードを有効にする
22  draftMode().enable()
23
24  // 取得した情報からパスを指定してリダイレクトする
25  redirect(`/articles/${article.slug}`)
26}

app/articles/[slug]/page.tsx

1import { draftMode } from 'next/headers'
2import { notFound } from 'next/navigation'
3import { getArticles, getArticleBySlug } from '@/lib/newt'
4import styles from '@/app/page.module.css'
5import type { Metadata } from 'next'
6import type { Article } from '@/types/article'
7
8type Props = {
9  params: {
10    slug: string
11  }
12}
13
14export async function generateStaticParams() {
15  const articles = await getArticles()
16  return articles.map((article) => ({
17    slug: article.slug,
18  }))
19}
20
21export async function generateMetadata({ params }: Props): Promise<Metadata> {
22  const { isEnabled } = draftMode()
23  const { slug } = params
24  const article = await getArticleBySlug(slug, isEnabled)
25
26  return {
27    title: article?.title,
28    description: '投稿詳細ページです',
29  }
30}
31
32export default async function Article({ params }: Props) {
33  const { isEnabled } = draftMode()
34  const { slug } = params
35  const article = await getArticleBySlug(slug, isEnabled)
36  if (!article) {
37    notFound()
38  }
39
40  return (
41    <main className={styles.main}>
42      <h1>{article.title}</h1>
43      <div dangerouslySetInnerHTML={{ __html: article.body }} />
44    </main>
45  )
46}

app/articles/[slug]/not-found.tsx

1import styles from '@/app/page.module.css'
2
3export default function NotFound() {
4  return (
5    <main className={styles.main}>
6      <h1>Not Found</h1>
7    </main>
8  )
9}

app/api/disable-draft/route.ts

1import { draftMode } from 'next/headers'
2
3export async function GET() {
4  draftMode().disable()
5  return new Response('Draft mode is disabled')
6}

app/articles/[slug]/page.tsx

1（省略）
2
3export default async function Article({ params }: Props) {
4  const { isEnabled } = draftMode()
5  const { slug } = params
6  const article = await getArticleBySlug(slug, isEnabled)
7  if (!article) {
8    notFound()
9  }
10
11  return (
12    <main className={styles.main}>
13      {isEnabled && (
14        <Link href="/api/disable-draft" prefetch={false}>
15          Draft Modeをやめる
16        </Link>
17      )}
18      <h1>{article.title}</h1>
19      <div dangerouslySetInnerHTML={{ __html: article.body }} />
20    </main>
21  )
22}