Vercelデプロイエラー完全解決ガイド

Error: Missing required environment variable: DATABASE_URL
Build failed with errors

TypeError: Cannot read properties of undefined (reading 'split')

# ローカルの .env.local を確認
cat .env.local

# 以下のような変数がある場合はすべてVercelに追加が必要
DATABASE_URL=postgresql://...
NEXT_PUBLIC_API_URL=https://api.example.com
AUTH_SECRET=...

Type error: Property 'name' does not exist on type 'User | null'

# ビルド前に必ず実行する
npx tsc --noEmit

# 型エラーを修正してからプッシュ

// next.config.ts（非推奨: 型チェックを無効化する設定）
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true, // やむを得ない場合のみ
  },
};

./app/components/Button.tsx
ESLint: 'onClick' is defined but never used. (no-unused-vars)
Failed to compile.

# ビルド前にLintを確認
npm run lint

# 自動修正できるものは修正
npm run lint -- --fix

// next.config.ts
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true, // 一時対応のみ
  },
};

Error: Task timed out after 300.00 seconds

// app/api/heavy-task/route.ts
export const maxDuration = 60; // Hobby最大300秒、Pro最大800秒

export async function GET() {
  // 重い処理
  const result = await heavyDatabaseQuery();
  return Response.json(result);
}

// app/api/trigger-job/route.ts
import { Client } from "@upstash/qstash";

const qstash = new Client({ token: process.env.QSTASH_TOKEN! });

export async function POST(request: Request) {
  const body = await request.json();

  // 重い処理を非同期キューに投げる
  await qstash.publishJSON({
    url: `${process.env.VERCEL_URL}/api/process-job`,
    body: body,
  });

  // すぐにレスポンスを返す
  return Response.json({ status: "queued" });
}

// app/api/fast-api/route.ts
// Node.jsランタイムがデフォルト — 設定不要
// Edge位置での実行が必要なときだけEdgeを使う

export async function GET() {
  return Response.json({ status: "ok" });
}

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

Error: Function exceeded memory limit

# Node.jsのメモリ制限を増やしてビルド
NODE_OPTIONS="--max-old-space-size=4096" npm run build

# Vercelダッシュボード > Environment Variables
NODE_OPTIONS = --max-old-space-size=4096

// ❌ 悪い例: 大きなJSONを一度にメモリに展開
export async function GET() {
  const hugeData = await fetchAllRecords(); // 100MB のデータ
  return Response.json(hugeData);
}

// ✅ 良い例: ストリーミングレスポンスを使う
export async function GET() {
  const stream = new ReadableStream({
    async start(controller) {
      const records = await fetchRecordsInBatches();
      for await (const batch of records) {
        controller.enqueue(
          new TextEncoder().encode(JSON.stringify(batch) + "\n")
        );
      }
      controller.close();
    },
  });

  return new Response(stream, {
    headers: { "Content-Type": "application/json" },
  });
}

// app/blog/[slug]/page.tsx
// generateStaticParamsが不完全だと本番でのみ404になる

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// app/blog/[slug]/page.tsx
// dynamicParams のデフォルトは true なので、未生成パスもオンデマンドで生成される
export const dynamicParams = true;

// dynamicParams = false にすると生成されていないパスは明示的に404になる

// middleware.ts
import createMiddleware from "next-intl/middleware";

export default createMiddleware({
  locales: ["ja", "en", "es"],
  defaultLocale: "ja",
  // localePrefix: "always" の場合、/ja/... が必須になる
  localePrefix: "as-needed", // デフォルトロケールはプレフィックスなし
});

export const config = {
  matcher: ["/((?!api|_next|_vercel|.*\\..*).*)"],
};

// ❌ キャッシュ戦略を明示していない
export async function getArticles() {
  const res = await fetch("https://api.example.com/articles");
  // Next.js 15+ではデフォルトno-store。明示しないと意図が不明確
  return res.json();
}

// ✅ 適切なキャッシュ戦略を明示する
export async function getArticles() {
  const res = await fetch("https://api.example.com/articles", {
    // 60秒ごとに再検証
    next: { revalidate: 60 },
  });
  return res.json();
}

// または完全にキャッシュを無効化
export async function getLatestPrice() {
  const res = await fetch("https://api.example.com/price", {
    cache: "no-store",
  });
  return res.json();
}

// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from "next/cache";
import { NextRequest } from "next/server";

export async function POST(request: NextRequest) {
  const token = request.nextUrl.searchParams.get("token");

  // 不正なリクエストを拒否
  if (token !== process.env.REVALIDATION_TOKEN) {
    return Response.json({ error: "Invalid token" }, { status: 401 });
  }

  const body = await request.json();

  if (body.path) {
    revalidatePath(body.path);
  }

  if (body.tag) {
    revalidateTag(body.tag);
  }

  return Response.json({ revalidated: true });
}

Access to fetch at 'https://api.example.com' from origin 'https://32blog.com'
has been blocked by CORS policy

// app/api/data/route.ts
export async function GET(request: Request) {
  const response = await fetchData();

  return Response.json(response, {
    headers: {
      "Access-Control-Allow-Origin": "https://32blog.com",
      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, Authorization",
    },
  });
}

// OPTIONSリクエスト（preflight）にも応答する
export async function OPTIONS() {
  return new Response(null, {
    headers: {
      "Access-Control-Allow-Origin": "https://32blog.com",
      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, Authorization",
    },
  });
}

// next.config.ts
const nextConfig = {
  async headers() {
    return [
      {
        source: "/api/:path*",
        headers: [
          { key: "Access-Control-Allow-Origin", value: "https://32blog.com" },
          { key: "Access-Control-Allow-Methods", value: "GET,POST,OPTIONS" },
          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
        ],
      },
    ];
  },
};

export default nextConfig;