<p>「<a href="https://841-biboroku.info/entry/edge-runtime-keyword-search/" target="_blank" rel="noopener noreferrer nofollow">CloudflareのEdge RuntimeとmicroCMSのqパラメータを使ってキーワード検索結果ページを作る</a>」で作成した検索ページをもとにmicroCMSのプレビュー画面を作成しました。</p><p>バージョン：Next.js v13.5.4（Pages Router）、@cloudflare/next-on-pages CLI v.1.8.6、microcms-js-sdk v2.7.0</p><h2 id="h74bfa52507">microCMSに画面プレビューボタンを表示する</h2>

<ol><li>API設定＞画面プレビューを開く</li><li>遷移先URLを設定<br>https://プレビュー表示させるドメイン/プレビュー用のページ/?id={CONTENT_ID}&amp;draftKey={DRAFT_KEY}</li><li>画面プレビューボタンの表示をONにする</li><li>変更する</li><li>編集画面に「画面プレビュー」ボタンが表示される</li></ol><p>💬余談<br>ローカルで開発してるときは遷移先URLに「http://localhost:3000/」を設定してすぐ確認できるようにしてました。</p><h2 id="h514049fd38">プレビュー用ページ</h2>

import type {
  GetServerSideProps,
  InferGetServerSidePropsType,
  NextPage,
} from "next";
import { getBlogDetail, getAllCategoryList } from "@/libs/microcms";
import type { Blog, Category } from "@/libs/microcms";
import { NextSeo } from "next-seo";
import { CategoryList } from "@/components/CategoryList";
import { Article } from "@/components/Article";

export const runtime = "experimental-edge";

type Props = {
  post: Blog;
  categories?: Category[];
} & InferGetServerSidePropsType<typeof getServerSideProps>;

const Page: NextPage<Props> = ({ post, categories }) => {
  if (post)
    return (
      <>
        <NextSeo noindex={true} />
        <Article post={post} />
        <CategoryList categories={categories} />
      </>
    );
};
export default Page;

export const getServerSideProps: GetServerSideProps = async (context) => {
  const postId = context.query.id;
  const draftKey = context.query.draftKey;
  const post = postId
    ? await getBlogDetail(`${postId}`, {
        draftKey: `${draftKey}`,
      })
    : null;
  const categories = await getAllCategoryList({ fields: "title,slug" });

  if (!post) {
    return {
      notFound: true,
    };
  }

  const data = {
    post,
    categories,
  };

  return {
    props: data,
  };
};

<h4 id="ha2d7bf771c">エッジランタイムの設定</h4><p><a href="https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/get-started/#4-ensure-all-server-rendered-routes-use-the-edge-runtime" target="_blank" rel="noopener noreferrer nofollow">Ensure all server-rendered routes use the Edge Runtime</a></p><p>Cloudflare PagesでSSRするときに必要な設定をプレビューページに設定します。</p><pre><code>export const runtime = &quot;experimental-edge&quot;;</code></pre><h4 id="h6b6fe95a5b">コンテントIDと下書き状態を取得するdraftKeyのクエリ文字列を取得</h4>

const postId = context.query.id;
const draftKey = context.query.draftKey;
const post = postId
  ? await getBlogDetail(`${postId}`, {
      draftKey: `${draftKey}`,
    })
  : null;

<p>getBlogDetail()はmicroCMS SDKの<a href="https://github.com/microcmsio/microcms-js-sdk?tab=readme-ov-file#get-single-content-with-parameters" target="_blank" rel="noopener noreferrer nofollow">getListDetail()</a>を使って記事を取得するようにしています。</p><p>これで終わりです。</p><p>あとはほぼ検索結果ページと同じ仕組みにしているので、簡単に実装ができました。</p>

Cloudflare Pages×Next.jsで実装するmicroCMSのプレビュー画面

<p>サーチコンソールから何度も来ている「ページがインデックスに登録されない新しい要因」にようやく・・向き合うことにしました。</p><p>今回対処したのは、「見つかりませんでした（404）」のリストに上がっているURLを対象に原因を探ってどのような対策を施したかをまとめました。<br>（対策は最適解が他にないか悩み中...）</p><h2 id="hc3277aa6ac">404が発生しているURLの確認</h2><p>サーチコンソールにログインして、サイドバーのインデックス作成＞ページもしくは、ヘッダー右にある🔔アイコンのメッセージを開きインデックス登録レポートを開く。</p><p>「ページがインデックスに登録されなかった理由」の「見つかりませんでした（404）」を開くとエラーが出ているページのURL一覧が表示されます。</p><h2 id="h34207032da">リンク元を探す</h2><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/523b39f6d97647f6a65a445bfef52b87/Group%20169.png?w=800&amp;h=467" alt="" width="800" height="467"></figure><p>エラーが出ているURLの虫眼鏡アイコンをクリックすると、URLの検査がはじまり完了すると参照元ページURLを含めた検出情報が表示されます。</p><h2 id="h11072d5cdc">原因を探る</h2><p>page/2/public/images　こんなパス指定した記憶がない・・</p><p>参照元ページにアクセスし、ページのソースを表示し「public/images」で検索したところ__NEXT_DATA__内のjsonで該当しました・・！</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/e594ea55656a4c94b2d4f23f87624fc9/Group%20170.png?w=800&amp;h=180" alt="" width="800" height="180"></figure><p>microCMSで投稿した記事の本文に記載していたサンプルコード「.--/--」の部分が表示しているページから相対パスとしてサーチコンソールが認識してしまったため、リンク先がない＝404として検知されていました。</p><h2 id="h1bb0e3b2b8">類似の状況や問題の解決方法を探す</h2><p>ありました・が、これだ！といった解決法はまだないようです😥</p><ul><li><a href="https://github.com/vercel/next.js/issues/40143" target="_blank" rel="noopener noreferrer nofollow">&quot;Paths&quot; in __NEXT_DATA__ are picked up by Google Search Console as internal links</a></li><li><a href="https://github.com/vercel/next.js/discussions/39377" target="_blank" rel="noopener noreferrer nofollow">google crawling link in __NEXT_DATA__</a></li></ul><h2 id="h9c1840cf1f">できる対策を施す</h2><h3 id="hf79a46c28b">一覧ページで取得するフィールドを制限する</h3><p>microCMSからコンテンツを取得する際、<a href="https://document.microcms.io/content-api/get-list-contents#h7462d83de4" target="_blank" rel="noopener noreferrer nofollow">フィールドの制限</a>をしていなかったので本文として定義しているフィールドを除いて必要なフィールドだけを取得するよう変更しました。</p><h3 id="h5074f40754">相対パスとして認識されないように本文に任意の文字を挿入する</h3><p>.と--/--の間、--/--の後ろにハイフンを2つ挿入し、出力時に置き換えています。</p><pre><code>sec.body.replace(/ハイフンハイフン/g, &quot;&quot;)</code></pre><p>※置き換えを施しているため、ハイフンと記載しています</p><p>これでjsonには、.ハイフンハイフン/ハイフンハイフンとなり、サイト表示では.--/--と表示されるようになりました。</p><h2 id="h4bef799bf1">サーチコンソールに修正報告</h2><p>「修正を検証」をクリックすると検証：開始に切り替わりました。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/4aca5a4631dd41cbb292a92b34a97fa8/Group%20171.png" alt="" width="818" height="329"></figure><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/ced261566a394451a8c6ae9d51ecc8a8/image%2045.png" alt="" width="815" height="98"></figure><h2 id="haac29bf251">経過観察中...👀</h2><p>2024/8/29 効果が見られないので置換処理をやめました</p>

__NEXT_DATA__のjson内のパスがサーチコンソールで認識され404エラーが出てた件

<h2 id="h1f01853ea1">getServerSidePropsで検索ページを作る</h2>

export const runtime = "experimental-edge";

const Home: NextPage<Props> = ({ posts, keyword, totalCount, categories }) => {
  return (
    <>
      <div className={styles.header}>
        <SearchBox />
        <p className={styles.result}>該当：{totalCount}件</p>
      </div>
      <div className={styles.wrap}>
        {keyword === "" && <p>キーワードを入力してください</p>}
        {posts && totalCount > 0 && (
          <>
            <div className={styles.wrap}>
              <div className={styles.archive}>
                {posts
                  ? posts.map((post) => <PostItem key={post.id} post={post} />)
                  : ""}
              </div>
            </div>
          </>
        )}
        {totalCount === 0 && keyword && (
          <p className="notfound">
            「{keyword}」を含む記事はありません。
            <br />
            キーワードを変更して再検索してください。
          </p>
        )}
      </div>
      <CategoryList categories={categories} />
    </>
  );
};
export default Home;

export const getServerSideProps: GetServerSideProps = async (context) => {
  const keyword = context.query.q;
  const posts = keyword
    ? await getAllBlogList({
        q: `${keyword}`,
        fields: "必要なフィールドだけ取得（指定しなくてもいい）",
      })
    : null;
  const totalCount = posts ? posts.length : 0;
  const categories = await getAllCategoryList({ fields: "title,slug" });

  const data = keyword
    ? {
        posts,
        keyword,
        totalCount,
        categories,
      }
    : {
        keyword,
        totalCount,
        categories,
      };

  return {
    props: data,
  };
};

<h4 id="hcbe32938f2">エッジ ランタイムを設定</h4><pre><code>export const runtime = &quot;experimental-edge&quot;;</code></pre><h4 id="hc070b28ff1">クエリ文字列（?q=xxx）の取得</h4><pre><code>const keyword = context.query.q;</code></pre><h4 id="h1cc13c40af">microCMSのコンテンツの全文検索用のクエリパラメータを指定</h4><pre><code>q: `${keyword}`,</code></pre><p>getAllBlogListは、microCMS-SDKのコンテンツの全件取得を行うgetAllContents()メソッドを使っています。</p><pre><code>export const getAllBlogList = async (queries?: MicroCMSQueries) =&gt; {
 const listData = await client.getAllContents&lt;Blog&gt;({
  endpoint: &quot;blog&quot;,
  queries,
 });
 return listData;
};</code></pre><p>microCMSのドキュメントにもあるように、完全一致する結果を返してくれるわけではありませんが、そこまで厳密にしなくてもいいのでqクエリパラメータを使いました。</p><blockquote><p>qパラメータによる検索は、コンテンツに関する情報を形態素解析した結果を対象に実施されます。検索語句と一致するキーワードの登録がないコンテンツでも、検索結果に含まれることがあります。正確な部分一致検索が必要な場合は、filtersパラメータのcontainsの使用をご検討ください。</p></blockquote><p>クエリパラメータ q <a href="https://document.microcms.io/content-api/get-list-contents#ha8abec0b2f"><u>https://document.microcms.io/content-api/get-list-contents#ha8abec0b2f</u></a></p><h4 id="he267d78153">keywordが未指定のとき</h4><p>keywordが指定されてないときは全件該当してしまうので、結果を返さないようにpostsを含まないようにしています。（もっといい書き方あるだろう・）</p>

<h2 id="h6c42ace2bd">Cloudflare PagesでSSRを使えるように設定</h2><p>設定＞ビルド＆デプロイ＞ビルドの構成のフレームワークプリセット「Next.js」を選択します。（※Next.js（Static HTML Export）ではなくNext.js）<br>ビルド コマンド、ビルド出力ディレクトリなど選択時に自動で初期値が設定されます。</p><p>設定＞functions＞互換性フラグに<code>nodejs_compat</code>を登録します。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/bb87002b4a5b4acb9dea6d962dfdfc11/image.png" alt="" width="966" height="557"></figure><p>デプロイして検索結果が表示されたら成功です🎉</p>

<h2 id="h93d835c79a">失敗・起こったエラー</h2><p>検索ページだけ作ってデプロイした結果</p><pre><code>Error occurred prerendering page &quot;/search&quot;. Read more: https://nextjs.org/docs/messages/prerender-error</code></pre><p>search/index.tsxに<code>export const runtime = &quot;edge&quot;;</code>を設定</p><pre><code>Error: Page /search provided runtime &apos;edge&apos;, the edge runtime for rendering is currently experimental. Use runtime &apos;experimental-edge&apos; instead.</code></pre><p>next.config.jsに<code>runtime: &apos;edge&apos;,</code>を設定</p><pre><code>experimental: {
  runtime: &apos;edge&apos;,
},</code></pre><pre><code>Error: Page /search provided runtime &apos;edge&apos;, the edge runtime for rendering is currently experimental. Use runtime &apos;experimental-edge&apos; instead.</code></pre><p>search/index.tsxに<code>export const runtime = &quot;erimental-edge&quot;;</code>を設定</p><pre><code>00:17:31.819Error occurred prerendering page &quot;/search&quot;. Read more: https://nextjs.org/docs/messages/prerender-error
00:17:31.819ReferenceError: self is not defined</code></pre><p>ビルドの構成から<code>next export</code>を削除したら静的ファイルが全部出力されなくなった・・</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/fced5e74e5b340aea6c3934df6ec4d15/image.png" alt="" width="986" height="293"></figure><p>ビルドの構成をNext.js（Static HTML Export）からNext.jsに変更して再デプロイしたら「Node.JS Compatibility Error」<br>「互換nodejs_compat性フラグが設定されていません」とのこと。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/b216e7c8f0fb410a965199b3f0b592f8/image.png" alt="" width="1059" height="432"></figure><h4 id="h370f4f57eb">ローカルの/search/ページでInernet Server Errorがでる</h4><pre><code>⚠ You are using an experimental edge runtime, the API might change.</code></pre><p>まだ解決できず、ローカルで動作確認するときはコメントアウトしています；</p><h4 id="hcd63b0c9a9">middlewareで設定していたBasic認証が効かなくなった</h4><p>以前、<a href="https://841-biboroku.info/entry/cloudflare-pages-function-basic-auth/" target="_blank" rel="noopener noreferrer nofollow"><u>functions/_middleware.tsでBasic認証を設定</u></a>をしていましたが、Edge runtimeの設定をしたら該当ファイルを読まなくなりBasic認証が解除されてしまいました。なのでBasic認証はNext.jsのmiddlewareに切り替えて実装することにしました。</p><p><br></p>

<p>📝参考<br>・<a href="https://blog.microcms.io/astro-search/" target="_blank" rel="noopener noreferrer nofollow">AstroとmicroCMSを使った検索機能を実装する</a><br>・Cloudflare Deploy a Next.js site＞<a href="https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-the-edge-runtime" target="_blank" rel="noopener noreferrer nofollow">Use the Edge Runtime</a><br>・<a href="https://developers.cloudflare.com/workers/runtime-apis/nodejs/" target="_blank" rel="noopener noreferrer nofollow">CloudflareダッシュボードからNode.jsを有効にする</a><br>・<a href="https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/examples.md" target="_blank" rel="noopener noreferrer nofollow">packages/next-on-pages/docs/examples.md</a></p>

<h2 id="h44f833b591">追記：sitemap.xmlが生成されなくなっていた</h2><p>cloudflareのビルドコマンドを変更したときにビルド出力ディレクトリが<code>.vercel/output/static</code>に切り替わったのにnext-sitemap.config.jsが以前の設定のままだったことが原因でした。<br>next-sitemap.config.jsの設定を変更し再デプロイで生成されるようになりました。</p>

//修正前
module.exports = {
  outDir: './out',
}

//修正後
module.exports = {
  outDir: '.vercel/output/static',
}

CloudflareのEdge RuntimeとmicroCMSのqパラメータを使ってキーワード検索結果ページを作る

<p>Next.jsプロジェクトの立ち上げからVercelへCLIを使ってデプロイするまでの一連の流れをまとめた備忘録です。</p><p>&lt;前提&gt;<br>GitHubとVercelのアカウントは作成済み。<br>GitHub CLIはインストール済み。<br>Next.jsの編集は省略します。</p><h2 id="he5d8b8b3a8">まずはGitHubにリポジトリの準備</h2><p>GitHubにリポジトリを作ります。（GitHub CLIを使っています）</p><pre><code>gh repo create sample --private</code></pre><p>sample ＝ プロジェクト名<br>--private ＝ 非公開リポジトリ</p><p>作成したリポジトリをローカルにクローンします。</p><pre><code>gh repo clone sample .</code></pre><p>末尾の「.（ドット）」なしの場合、プロジェクト名のフォルダが作成されます。<br>今回は作成せずに実行中のフォルダにクローンしたかったので「.」を付けました。</p><h2 id="h823ddb9f7b">Next.jsプロジェクトの作成</h2><p>Next.jsのプロジェクトも現在のディレクトリに作成するため末尾に「.」を付けています。</p><pre><code>npx create-next-app@latest .</code></pre><p>今回は、デプロイまでの一連の流れだけなのでNext.jsの編集はせずにコミット・プッシュしました。</p><p>リポジトリが紐づいたか確認してみます。</p><pre><code>gh browse</code></pre><p>GitHubのリポジトリページが開き、データが反映されていることが確認できました。</p><p>リポジトリの準備が完了しました。</p>

<h2 id="h05ce6334cb">Vercel CLIの導入からデプロイ</h2><p>Vercel CLIをインストールします。（すでにインストール済みの場合は不要です）</p><pre><code>npm i -g vercel</code></pre><h3 id="h89873119d1">Vercelにログインしてみる</h3><p>ブラウザが起動してVercelへのログインが成功するとSuccess!と表示されます。</p><pre><code>vercel login

● Continue with GitHub 
○ Continue with GitLab 
○ Continue with Bitbucket 
○ Continue with Email 
○ Continue with SAML Single Sign-On 

&gt; Success!　～</code></pre><h3 id="h2663a1aa0a">ローカルで実行してみる</h3><p>初回、いくつかVercelの設定を聞かれます。<br>設定が終わるとVercelにプロジェクトが作成されます。</p><pre><code>vercel dev</code></pre><p>作成されたプロジェクトを確認する場合、以下を実行すると一覧が表示されます。</p><pre><code>vercel project list</code></pre><p>ローカルのプロジェクトとVercelのプロジェクトを紐づけます。</p><pre><code>vercel link

? Set up “~\sample”? [Y/n] y
? Which scope should contain your project? xxxxx projects
? Found project “xxxxx-projects/sample”. Link to it? [Y/n] y
✅  Linked to xxxxx-projects/sample(created .vercel)</code></pre><h3 id="h5f215d7c3a">いよいよデプロイ</h3><p>シンプルすぎて少々心配になりますが、以下でデプロイが実行されます。<br>何も編集してないデフォルトのままのNext.jsなのであっと言う間にデプロイが完了しました。</p><pre><code>vercel

🔍  Inspect: https://vercel.com/xxxxx-projects/sample/ass7s6dasd4fsa6dfasdf5s [1s]
✅  Preview: https://sample-ws7ae6afs-xxxxx-projects.vercel.app [1s]
📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡  To change the domain or build command, go to https://vercel.com/xxxxx-projects/sample/settings</code></pre><h3 id="h168cbc61b4">番外編：環境変数をVercelCLIで簡単設定</h3><p>環境変数名「BASE_URL」、値「https://xxx.com」を本番・プレビュー・開発環境に設定する。</p><pre><code>vercel env add

? What’s the name of the variable? BASE_URL
? What’s the value of BASE_URL? https://xxx.com
? Add BASE_URL to which Environments (select multiple)? (Press &lt;space&gt; to select, &lt;a&gt; to toggle all, &lt;i&gt; to invert selection)
› ▪︎ Production
  ▪︎ Preview
  ▪︎ Development</code></pre><p>設定した環境変数を確認する。<br>値は暗号化されるので表示されません。ダッシュボードから確認できます。</p><pre><code>vercel env list

 name        value               environments                        created        
 BASE_URL    Encrypted           Production, Preview, Development    12s ago </code></pre><p></p>

Next.jsのプロジェクトを作成してCLIを使ってVercelへデプロイしてみる

<p>microCMSに登録した記事と記事に紐づけたカテゴリのデータをもとに、Next.jsの動的ルーティングを使用しディレクトリ構造を再現してみました。</p>

{
  "id": "6toijsnfw",
  "title": "記事タイトル",
  "slug": "post-slug",
  "category": {
    "id": "23kopsdfwe",
    "title": "カテゴリ名",
    "slug": "category-slug",
  }
}

<h2 id="hfd362d2909">CASE1：https://ドメイン/category-slug/post-slug/</h2><p>カテゴリのスラッグを受け取れるようにブラケットで囲んだ<code>[categorySlug]</code>フォルダを作成します。</p><p>その下に記事スラッグ用の<code>[slug].tsx</code>ファイルを作成します。</p><p><br></p><p>ブラケット内に指定する名前はparamsに指定するキー名と一致していれば、データが取得できます。</p>

export const getStaticPaths: GetStaticPaths = async () => {
  const contents = await (記事を取得);
  const paths = contents.map((content: PostPageProps) => ({
    params: {
      categorySlug: content.category.slug,
      slug: content.slug,
    },
  }));
  return {
    paths,
    fallback: false,
  };
}

<p>記事に複数カテゴリを設定している場合、カテゴリ情報が配列になっているので以下のように変更すると取得できます。</p><pre><code>categorySlug: content.category[0].slug,</code></pre><p>※カテゴリは必須項目とし、最低1件は紐づける想定です。</p>

<h2 id="h46a987070a">CASE2：https://ドメイン/entry/post-slug/</h2><p>第一階層は/entry/の固定で、第二階層は記事スラッグだけを利用して再現する場合は以下の通り。</p><p>ブラケットなしのentryフォルダを作成し、<code>[slug].tsx</code>ファイルを作成します。</p><p>CASE1の<code>slug: content.slug,</code>だけで実現できます。</p>

const paths = contents.map((content: PostPageProps) => ({
  params: {
    slug: content.slug,
  },
}));

<p>📒Next.js公式</p><p><a href="https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes" target="_blank" rel="noopener noreferrer">Dynamic Routes</a></p>