microCMSの画面プレビューをしたい

前提

　Next.js、microCMSで作業していて、firebase hostingを使いデプロイしています。
Github Actionsで公開の通知を受け取り、自動デプロイに成功しています。
next devで試したところ、ローカル環境では成功しています。
firebase deployも成功しています。

microCMSの画面プレビューの遷移先URLはhttps://×××.web.app/api/preview?slug={CONTENT_ID}&draftKey={DRAFT_KEY}にしています。

実現したいこと

microCMSの画面プレビューを使い、本番環境でプレビュー画面を表示させたいです。

発生している問題・エラーメッセージ

microCMSの画面プレビューの遷移先URLに行っても
とでます。

Page Not Found

This file does not exist and there was no index.html found in the current directory or 404.html in the root directory.

Why am I seeing this?
You may have deployed the wrong directory for your application. Check your firebase.json and make sure the public directory is pointing to a directory that contains an index.html file.

You can also add a 404.html in the root of your site to replace this page with a custom error page.

と出てきて、下にfirebaseのロゴのあるページが表示されます。

該当のソースコード

src/pages/api/preview.js
1import { client } from "../../libs/client";
2
3 console.log('hello')
4
5const preview = async (req, res) => {
6  const { draftKey, slug } = req.query
7  if (!req.query.slug) {
8    return res.status(404).end();
9  }
10
11  const data = await client.get({
12    endpoint: 'app',
13    contentId: slug,
14    queries: {
15        draftKey,
16    },
17  })
18
19  if (!data) {
20    return res.status(401).json({ message: 'Invalid slug' });
21  }
22
23  res.setPreviewData({
24    slug: data.id ,
25    draftKey: req.query.draftKey,
26  });
27  res.writeHead(307, { Location: `/preview/${data.id}` });
28  res.end('Preview mode enabled');
29};
30
31export default preview;

src/pages/preview/[slag].tsx
1import { client } from "../../libs/client";
2import type {App} from "../../types/app";
3
4type Props = {
5  app: App
6  draftKey: string
7}
8
9
10export default function BlogId({ app, draftKey }: Props) {
11  if (!app) {
12    return false;
13  }
14  return (
15    <>
16      {draftKey && (
17        <div>
18          現在プレビューモードで閲覧中です。
19        </div>
20      )}
21      <main>
22      プレビューモード
23        <h1>{app.title}</h1>
24        <div
25          dangerouslySetInnerHTML={{
26            __html: `${app.body}`,
27          }}
28        />
29    </main>
30    </ >
31  )
32}
33
34export const getStaticPaths = async () => {
35  const data = await client.get({ endpoint: "app" });
36  const paths = data.contents.map((content: any) => `/preview/${content.id}`);
37  return { paths, fallback: true };
38};
39
40
41export const getStaticProps = async (context: any) => {
42  const { params, previewData } = context
43  if (!params?.slug) {
44    throw new Error('Error: ID not found')
45  }
46
47  type Draft = {
48    draftKey: string
49  }
50
51  const isDraft = (arg: any): arg is Draft => {
52    if (!arg?.draftKey) {
53      return false
54    }
55    return typeof arg.draftKey === 'string'
56  }
57
58  const slug = String(params.slug);
59  const draftKey = isDraft(previewData)
60    ? { draftKey: previewData.draftKey }
61    : {}
62
63  try {
64    const data = await client.getListDetail<App>({
65      endpoint: "app",
66      contentId: slug,
67      queries: draftKey
68    });
69    return {
70      props: {
71        app: data,
72        ...draftKey,
73      },
74    };
75  } catch (e) {
76    return { notFound: true }
77  }
78};

firebase.json
1{
2  "hosting": [
3    {
4      "target": "jamstack-app",
5      "public": "out",
6      "ignore": [
7        "firebase.json",
8        "**/.*",
9        "**/node_modules/**"
10      ]
11    },
12    {
13      "target": "my-preview",
14      "public": "build",
15      "ignore": [
16        "firebase.json",
17        "**/.*",
18        "**/node_modules/**"
19      ],
20      "rewrites": [
21        {
22          "source": "**",
23          "destination": "/index.html"
24        }
25      ]
26    }
27  ]
28}

package.json
1{
2  "name": "jamstack-app",
3  "version": "0.1.0",
4  "private": true,
5  "main": "index.js",
6  "scripts": {
7    "dev": "next dev",
8    "build": "next build && next export",
9    "deploy": "firebase deploy --only functions,hosting",
10    "start": "next start",
11    "lint": "next lint"
12  },
13  "dependencies": {
14    "@next/font": "13.1.0",
15    "@types/node": "18.11.17",
16    "@types/react": "18.0.26",
17    "@types/react-dom": "18.0.10",
18    "axios": "^1.2.2",
19    "dotenv": "^16.0.3",
20    "eslint": "8.30.0",
21    "eslint-config-next": "13.1.0",
22    "firebase": "^9.15.0",
23    "firebase-tools": "^11.19.0",
24    "microcms-js-sdk": "^2.3.2",
25    "next": "13.1.0",
26    "react": "18.2.0",
27    "react-dom": "18.2.0",
28    "typescript": "4.9.4"
29  },
30  "devDependencies": {
31    "serve": "^14.1.2"
32  }
33}