Next.jsでクライアントコンポーネントを利用して、プレビュー環境を作成する

.env.local

1NEXT_PUBLIC_NEWT_SPACE_UID=your-space-uid
2NEXT_PUBLIC_NEWT_CDN_API_TOKEN=xxxxxxxxxxxxxxx
3NEXT_PUBLIC_NEWT_API_TOKEN=xxxxxxxxxxxxxxx
4NEXT_PUBLIC_NEWT_PREVIEW_SECRET=hogehoge

lib/newt.ts

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

components/ArticleDetail/index.tsx

1import styles from './styles.module.css'
2import type { Article } from '@/types/article'
3
4export function ArticleDetail({ article }: { article: Article }) {
5  return (
6    <main className={styles.main}>
7      <h1>{article.title}</h1>
8      <div dangerouslySetInnerHTML={{ __html: article.body }} />
9    </main>
10  )
11}

app/articles/[slug]/page.tsx

1import { ArticleDetail } from '@/app/components/ArticleDetail'
2import { getArticles, getArticleBySlug } from '@/lib/newt'
3import type { Metadata } from 'next'
4
5type Props = {
6  params: {
7    slug: string
8  }
9}
10
11export async function generateStaticParams() {
12  const articles = await getArticles()
13  return articles.map((article) => ({
14    slug: article.slug,
15  }))
16}
17export const dynamicParams = false
18
19export async function generateMetadata({ params }: Props): Promise<Metadata> {
20  const { slug } = params
21  const article = await getArticleBySlug(slug, false)
22
23  return {
24    title: article?.title,
25    description: '投稿詳細ページです',
26  }
27}
28
29export default async function Page({ params }: Props) {
30  const { slug } = params
31  const article = await getArticleBySlug(slug, false)
32  if (!article) return
33
34  return <ArticleDetail article={article} />
35}

app/articles/draft/page.tsx

1'use client'
2import { useSearchParams } from 'next/navigation'
3import { Suspense, useEffect, useState } from 'react'
4import { ArticleDetail } from '@/app/components/ArticleDetail'
5import { getArticleBySlug } from '@/lib/newt'
6import type { Article } from '@/types/article'
7
8function ArticlePage() {
9  const searchParams = useSearchParams()
10  const secret = searchParams.get('secret')
11  const slug = searchParams.get('slug')
12  const [article, setArticle] = useState<Article | null>(null)
13
14  useEffect(() => {
15    if (secret !== process.env.NEXT_PUBLIC_NEWT_PREVIEW_SECRET || !slug) return
16    ;(async () => {
17      const article = await getArticleBySlug(slug, true)
18      setArticle(article)
19    })()
20  }, [secret, slug])
21
22  return article ? <ArticleDetail article={article} /> : null
23}
24
25export default function Page() {
26  return (
27    <Suspense>
28      <ArticlePage />
29    </Suspense>
30  )
31}

app/articles/draft/layout.tsx

1import type { Metadata } from 'next'
2import type { ReactNode } from 'react'
3
4export const metadata: Metadata = {
5  robots: {
6    index: false,
7  },
8}
9
10export default async function Layout({ children }: { children: ReactNode }) {
11  return <>{children}</>
12}