【最終手段】CloudflarePagesでnextjsデプロイするときに毎回エラーが出てくるときの最終手段

はじめに

今回紹介するこの方法は、まさに最終手段です。
個人間での利用以外であまり使用しないことをお勧めします。

試した環境

私が試した環境は、

Framework: Nextjs
Language: TypeScript
module: 以下参照

package.json

{
  "name": "yurinoki-bbs.com",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-toast": "^1.2.6",
    "@supabase/supabase-js": "^2.48.1",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.475.0",
    "next": "15.1.6",
    "next-themes": "^0.4.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-markdown": "^9.0.3",
    "sonner": "^1.7.4",
    "supabase": "^2.9.6",
    "tailwind-merge": "^3.0.1"
  },
  "devDependencies": {
    "@cloudflare/next-on-pages": "^1.13.7",
    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.1.6",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.7.3",
    "webpack": "^5.97.1",
    "webpack-cli": "^6.0.1"
  }
}

まぁこんな感じのモジュールを使って試しました。
これ以外の環境では試していないので実際にこの対処法が使えるかはわからないことをご了承ください。

対処法

その１

まず、一回普通にCloudflarePagesでデプロイします。
この時重要なのは、たぶん一回は必ず失敗するということです。
失敗したらデプロイの設定に飛んで
バインディング -> 互換性フラグという設定に、

nodejs_compat

というのを追加してください。
これがないとnodejsに関するapiが使えないらしいです。

その2

next.config.tsに以下の設定を加えてください。
これはeslintのエラーや警告を無視する設定です

const nextConfig: NextConfig = {
  /* config options here */

  eslint: {
    ignoreDuringBuilds: true
  }
};

私の場合はこうなりました。

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */

  eslint: {
    ignoreDuringBuilds: true
  }
};

export default nextConfig;

はい、この設定以外何もないです（）

その3

tsconfig.jsonのcompilerOptionsに以下の設定を加えてください

"noImplicitAny": false

これは、コード内でany型を許容するという設定です。
私の場合、コード内でanyを使っていたのでこれが必須でしたが、anyを使っていない人は別に必須ではありません

その4

eslint.config.mjsを以下にしてください。
これの書き方に関しては私さっぱりなのでコメントなどで教えてもらえれば改善するかもです

eslint.config.mjs

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

export default [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    rules: {
      "@next/next/no-async-client-component": "off",
      "@typescript-eslint/no-explicit-any": "off",
      "@typescript-eslint/no-unsafe-function-type": "off",
      "@typescript-eslint/no-unused-vars": "off",
      "react-hooks/exhaustive-deps": "off",
      "@next/next/no-sync-scripts": "off"
    },
  }
];

これは、eslintですべてのエラー、警告をスルーするといった設定です。
非推奨です

読んでいただきありがとうございました

この設定をし、私はデプロイに成功しましたが、皆様がこれで動くとは限りません。
この設定は、公開するサービスで絶対に使わないでください。

読んでいただきありがとうございました。