レンタルサーバーでもmicroCMS + Next.js でプレビュー機能を使いたい (SSR未使用)

/preview/works

src/
 pages/
  works/
　　　　　　　　[slug].tsx　　　　// works詳細ページ（参考）
  preview/
　　　　　　　　　works.tsx // ← 新しく作るworks詳細プレビューページ

import React, { useEffect, useState } from 'react'
import { createClient } from 'microcms-js-sdk'

// type
import { Post } from 'types/index'

// components
import Loader from 'components/loader' // ローディング
import WorksDetailBody from 'components/worksDetailBody'　// 詳細ページのコンポーネント

type FetchData = {
  post: Post | null　   　　　　　　　　　　　　　　　　　　　// 現在の記事の情報
  prev: { slug: string } | null　　// 1つ後の記事の情報　今回は関係無い
  next: { slug: string } | null　　// 1つ前の記事の情報　今回は関係無い
}

// プレビューページのPage コンポーネント ////////////////////////////
export default function WorksPreview() {
　　　　// loadingを制御
　　　　const [isLoading, setIsLoading] = useState(true)
　　　　// fetchDataを入れる
　　　　const [postData, setPostData] = useState({} as FetchData)

  useEffect(() => {
    (async () => {
      // APIから記事データを取得
      const result = await previewWorksDetailProps()
      if (result?.post) {
      　　　　// プレビューのデータを取得出来たらデータをセット
        setPostData(result)
        setIsLoading(false)
        return
      }
      // データが取得出来なかったら、works top へ　リダイレクト
      location.href = '/works/'
    })()
  }, [])

  if (isLoading) return <Loader />
  // ここは、「/works/[slug].tsx」　と同じものを表示するので、コンポーネント化しておきましょう
  // プレビューページなので、isPreviewを渡す
  return postData ? WorksDetailBody({ ...postData, isPreview: true }) : <></>
}

// microCMS　のAPIから　データを取得する関数 ////////////////////////////
const previewWorksDetailProps = async (): Promise<FetchData | null> => {

  // urlからqueryパラメータを取得
　　　　const url = new URL(location.href)
  const searchParams = url.searchParams

  // プレビューに必要なパラメータのキー
  const targetParams = ['contentId', 'draftKey', 'microcmsApiKey']
  // queryパラメータを取得に３つの必要なパラメータがあるかチェック
  const isExistParams = targetParams.every((p) => {
    return searchParams.has(p)
  })

　　　　// パラメータが足りなかったら処理を完了
  // postデータがnullが返るとリダイレクトされる
  if (!isExistParams) {
    console.log('Invalid param')
    return null
  }

　　　　// microcms-js-sdkを使って、クライアントを作成
  // パラメータから、それぞれキーの値を取得
  const client = createClient({
    serviceDomain: 'hogehoge123',
    apiKey: searchParams.get('microcmsApiKey') ?? '',
  })
  const contentId = searchParams.get('contentId') ?? ''
  const draftKey = searchParams.get('draftKey') ?? ''

  // キーがあるので、下書き状態のデータを取得出来る
  const post = await client
    .get({
      endpoint: 'works',
      contentId, // これをセット
      queries: {
        draftKey, // これをセット
        fields: 'title,slug,url,url2,date,body,production_period,credit,category,technology,slider',
      },
    })
    .then((v) => {
      return v
    })
    .catch((err) => {
      return null
    })

  // postデータがnullが返ると処理を完了
  // リダイレクトされる
  if (post === null) {
    console.log("Couldn't get the data")
    return null
  }

　　　// ページャーの処理なので今回は関係無し start
  const pager: any[] = await Promise.allSettled([
    client
      .get({
        endpoint: 'works',
        queries: {
          draftKey,
          limit: 1,
          orders: '-date',
          filters: `date[less_than]${post.date}`,
          fields: 'slug',
        },
      })
      .then((v) => {
        return v?.contents?.length ? v.contents[0] : null
      })
      .catch((err) => {
        return null
      }),
    client
      .get({
        endpoint: 'works',
        queries: {
          draftKey,
          limit: 1,
          orders: 'date',
          filters: `date[greater_than]${post.date}`,
          fields: 'slug',
        },
      })
      .then((v) => {
        return v?.contents?.length ? v.contents[0] : null
      })
      .catch((err) => {
        return null
      }),
  ]).then((results) =>
    results.map((r) => {
      if (r.status === 'fulfilled') {
        return r.value
      }
      return null
    })
  )
　　　// ページャーの処理なので今回は関係無し end

　　　// 取得したpostデータを返却
  return {
    post,
    prev: pager[0] ?? null,
    next: pager[1] ?? null,
  }
}