✨

Next.js（Vercel）のブログサイトをCloudflareに移行

2025/04/12に公開

前回記事でも述べたように、

現在ブログサイトをVercelからCloudflareに移行しようとしているのですが、

デプロイが上手くいっていませんでした。
https://zenn.dev/masato24524/articles/20e160a92416ac
ようやく解決したので、詰まった点を備忘録として記載しておきます。

 ■Cloudflareの移行に必要な作業next-on-pagesを適用する
edge runtimeを適用する

 ■問題と対策（１）「1.next-on-pagesを適用する」まではOKです。
「2.edge runtimeを適用する」について、ページによっては下記のようなエラーが発生していました。
「Error: This browser does not support document.implementation.createHTMLDocument」
一部のページで取得した記事を"html-react-parser"を使ってparseしていたのですが、

どうもruntime edgeでは上記は実行できないようです。
chatGPTの回答↓
runtime: "edge" を指定すると：
実行環境が V8（Cloudflare Workersと似た軽量JS環境） になります。

この環境では document.implementation.createHTMLDocument のようなDOM操作系APIが存在しません。

そのため、html-react-parser や react-html-parser のようなライブラリが内部で DOM を使っていると、
Edge 環境ではエラーになります。
対策として、parseしている部分を別のコンポーネント化して、use clientで実行してあげます。
Parse.tsx

"use client";

import parse from "html-react-parser";
import React from "react";

// Parseコンポーネント
const ParseHtml = ({ blogContent }: any) => {
  return (
    <div id="blog-doc" className="inline-block mb-10 pt-4">
      {parse(blogContent)}
    </div>
  );
};

export default ParseHtml;
このParseHtmlをruntime edgeを適用している親コンポーネントから呼び出します。
page.tsx

export const runtime = "edge";

～～省略～～

return (
    ～～省略～～
          {/* パースをuse clientで実行 */}
          <ParseHtml blogContent={blogContent} />
    ～～省略～～
)
これでエラーが解決しました。

 ■問題と対策（２）上記は対策できたのですが、次にruntime edgeを適用してもビルドエラーが発生するページが出てきました。
10:43:55.027	⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
10:43:55.027	⚡️ 
10:43:55.028	⚡️ 	The following routes were not configured to run with the Edge Runtime:
10:43:55.028	⚡️ 	  - /pages/[pageId]
10:43:55.028	⚡️ 	  - /pages/contact
10:43:55.028	⚡️ 	  - /pages/portfolio
10:43:55.028	⚡️ 	  - /pages/works
10:43:55.028	⚡️ 
10:43:55.028	⚡️ 	Please make sure that all your non-static routes export the following edge runtime route segment config:
10:43:55.029	⚡️ 	  export const runtime = 'edge';
「export const runtime = 'edge';」 は記載しているはずなのに、

なぜ・・・(-_-;)
問題はapp router形式なのに、pagesというディレクトリを使用していることでした。

app router形式は通常appフォルダの直下に各フォルダを配置します。
一方pages router形式はpagesフォルダの直下に各フォルダを配置するのですが、

今回app router形式にも関わらず、app/pagesとなるフォルダを作成してしまっているためその場合はruntime edgeが適用されないという仕様になっているようです。
（※特に意識せずにpagesという名前にしていたのですが、それが良くなかった）
pagesフォルダの中身をappフォルダの直下に移動することで、無事に解決しました。

 さいごに解決策は割と単純だったんですが、そこにたどり着くまでがエラーの内容を理解できていないと難しいですね。
同じ問題に遭遇している人がいるか分かりませんが、ヒントになれば幸いです。

GitHubで編集を提案

■Cloudflareの移行に必要な作業

■問題と対策（１）

■問題と対策（２）

さいごに

Discussion