next.config.ts

import path from "node:path";

import type { NextConfig } from "next";

import createNextIntlPlugin from "next-intl/plugin";

import { ensureBuildVersionFiles } from "./scripts/build-version";

const IS_MOCK = process.env.PETDEX_MOCK === "1";
const IS_MOCK_AUTH = IS_MOCK || process.env.PETDEX_MOCK_AUTH === "1";

const CANONICAL_R2_PUBLIC_HOST = "assets.petdex.dev";
const WORKERS_DEV_R2_PUBLIC_HOST = "petdex-assets.raillyhugo.workers.dev";
const LEGACY_R2_PUBLIC_HOST = "pub-94495283df974cfea5e98d6a9e3fa462.r2.dev";
ensureBuildVersionFiles();

function r2PublicHost(): string {
  if (!process.env.R2_PUBLIC_BASE) return CANONICAL_R2_PUBLIC_HOST;
  try {
    const host = new URL(process.env.R2_PUBLIC_BASE).hostname;
    if (host === WORKERS_DEV_R2_PUBLIC_HOST || host === LEGACY_R2_PUBLIC_HOST) {
      return CANONICAL_R2_PUBLIC_HOST;
    }
    return host;
  } catch {
    return CANONICAL_R2_PUBLIC_HOST;
  }
}

function r2PublicSource(): string {
  if (!process.env.R2_PUBLIC_BASE) return `https://${CANONICAL_R2_PUBLIC_HOST}`;
  try {
    const parsed = new URL(process.env.R2_PUBLIC_BASE);
    if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
      return `https://${CANONICAL_R2_PUBLIC_HOST}`;
    }
    if (
      parsed.hostname === WORKERS_DEV_R2_PUBLIC_HOST ||
      parsed.hostname === LEGACY_R2_PUBLIC_HOST
    ) {
      return `https://${CANONICAL_R2_PUBLIC_HOST}`;
    }
    return parsed.origin;
  } catch {
    return `https://${CANONICAL_R2_PUBLIC_HOST}`;
  }
}

const r2PublicHostValue = r2PublicHost();
// assets.petdex.dev is the only asset host we serve from. The legacy
// pub-*.r2.dev and *.workers.dev hosts are dead; stored URLs pointing at
// them are rewritten to the canonical host at runtime via
// toCurrentR2PublicUrl, so they never need to be allowed here.
const r2PublicSources = Array.from(
  new Set([`https://${CANONICAL_R2_PUBLIC_HOST}`, r2PublicSource()]),
).join(" ");

// Content-Security-Policy. Blocks inline <script> sources we didn't ship,
// caps img / connect / frame ancestors. The `unsafe-inline` allowance for
// styles is required by Next/Tailwind during hydration; for scripts we
// keep 'unsafe-inline' as well because Next embeds RSC payloads inline,
// but with our same-origin CSRF guard + JSON-LD escape this is acceptable.
//
// Hosts allowed:
// - self for everything we render
// - clerk.petdex.dev + *.clerk.com / *.clerk.accounts.dev for
//   the Clerk client SDK
// - vercel-scripts / vitals for Vercel analytics
// - R2 public bucket + Clerk image hosts + social avatar hosts for sprites
//   and avatars
const cspDirectives = [
  "default-src 'self'",
  "base-uri 'self'",
  "object-src 'none'",
  "form-action 'self'",
  "frame-ancestors 'none'",
  // Clerk renders the sign-up CAPTCHA inside an iframe served from
  // challenges.cloudflare.com (Turnstile). Without it on frame-src and
  // its bootstrap script on script-src, the CAPTCHA fails to load and
  // the user can't create an account.
  "frame-src 'self' https://challenges.cloudflare.com https://*.clerk.com https://*.clerk.accounts.dev https://accounts.petdex.dev https://clerk.petdex.dev",
  "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://clerk.petdex.dev https://accounts.petdex.dev https://*.clerk.com https://*.clerk.accounts.dev https://challenges.cloudflare.com https://va.vercel-scripts.com https://vercel.live",
  "style-src 'self' 'unsafe-inline'",
  `img-src 'self' data: blob: ${r2PublicSources} https://img.clerk.com https://images.clerk.dev https://avatars.githubusercontent.com https://pbs.twimg.com https://storage.googleapis.com`,
  `media-src 'self' ${r2PublicSources}`,
  "font-src 'self' data:",
  // R2 reads via pub-*.r2.dev, R2 PUT uploads via the account-specific
  // S3 endpoint (*.r2.cloudflarestorage.com). Both must be on the
  // connect-src allowlist or browser fetch / XHR fail with a generic
  // network error (root cause of issues #22-#80+).
  `connect-src 'self' https://clerk.petdex.dev https://accounts.petdex.dev https://*.clerk.com https://*.clerk.accounts.dev https://api.clerk.com https://api.github.com https://challenges.cloudflare.com ${r2PublicSources} https://*.r2.cloudflarestorage.com https://va.vercel-scripts.com https://vitals.vercel-insights.com`,
  "worker-src 'self' blob:",
  "manifest-src 'self'",
  "upgrade-insecure-requests",
].join("; ");

const securityHeaders = [
  // 2 years HSTS + subdomains. preload-ready when we want to submit to
  // hstspreload.org.
  {
    key: "Strict-Transport-Security",
    value: "max-age=63072000; includeSubDomains",
  },
  // Block clickjacking. Modern frame-ancestors lives in CSP but we keep
  // the legacy header for older browsers.
  { key: "X-Frame-Options", value: "DENY" },
  // Stop MIME sniffing — a pet.json that's secretly HTML won't be
  // executed as HTML by the browser.
  { key: "X-Content-Type-Options", value: "nosniff" },
  // Conservative referrer to avoid leaking pet detail URLs to ad nets.
  { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
  // Lock down powerful APIs. We don't use any of these.
  {
    key: "Permissions-Policy",
    value:
      "camera=(), microphone=(), geolocation=(), interest-cohort=(), payment=(), usb=(), magnetometer=(), gyroscope=(), accelerometer=()",
  },
  // CSP — see directives above.
  { key: "Content-Security-Policy", value: cspDirectives },
  // Cross-origin protections.
  { key: "Cross-Origin-Opener-Policy", value: "same-origin" },
];

const versionJsonHeaders = [
  {
    key: "Cache-Control",
    value: "public, max-age=0, s-maxage=600, must-revalidate",
  },
];

const publicHtmlCacheHeaders = [
  {
    key: "Cloudflare-CDN-Cache-Control",
    value:
      "public, max-age=300, stale-while-revalidate=86400, stale-if-error=86400",
  },
];

const publicStaticHtmlPaths = [
  "/about",
  "/brand",
  "/built-with",
  "/collections",
  "/community",
  "/create",
  "/docs",
  "/download",
  "/leaderboard",
  "/legal/takedown",
  "/legal/telemetry",
  "/requests",
];

const publicHtmlCacheSources = [
  "/",
  "/:locale(en|es|zh)",
  ...publicStaticHtmlPaths.flatMap((source) => [
    source,
    `/:locale(en|es|zh)${source}`,
  ]),
  "/pets/:slug",
  "/:locale(en|es|zh)/pets/:slug",
  "/collections/:slug",
  "/:locale(en|es|zh)/collections/:slug",
  "/kind/:kind",
  "/:locale(en|es|zh)/kind/:kind",
  "/vibe/:vibe",
  "/:locale(en|es|zh)/vibe/:vibe",
];

const mockRoot = path.resolve(__dirname, "src/lib/mock");

const nextConfig: NextConfig = {
  experimental: {
    // TypeScript 7 dropped the compiler API Next reads for its dev-time
    // type checking, so `bun dev` crashed on boot after the 6-to-7 bump
    // in #580. This is the escape hatch Next's own error names: it drives
    // `tsc` as a CLI instead of importing its API.
    useTypeScriptCli: true,
  },
  // Hide the framework banner on every response.
  poweredByHeader: false,
  images: {
    remotePatterns: [
      { protocol: "https", hostname: CANONICAL_R2_PUBLIC_HOST },
      { protocol: "https", hostname: r2PublicHostValue },
      { protocol: "https", hostname: "img.clerk.com" },
      { protocol: "https", hostname: "images.clerk.dev" },
      { protocol: "https", hostname: "avatars.githubusercontent.com" },
      { protocol: "https", hostname: "pbs.twimg.com" },
      { protocol: "https", hostname: "storage.googleapis.com" },
    ],
  },
  // Server-only modules that don't survive Turbopack/webpack bundling:
  // - @electric-sql/pglite (mock mode) — native wasm + workers
  // - ali-oss — uses urllib's dynamic require('proxy-agent') for an
  //   optional dependency that the bundler can't resolve and treats
  //   as fatal. Marking ali-oss external lets the server runtime do
  //   the require() lazily, where the missing optional is harmless.
  serverExternalPackages: [
    "ali-oss",
    ...(IS_MOCK ? ["@electric-sql/pglite"] : []),
  ],
  async headers() {
    return [
      {
        source: "/version.json",
        headers: versionJsonHeaders,
      },
      // The client router fetches these same URLs with an `RSC: 1` header
      // and gets the React flight payload back. Cloudflare keys the cache on
      // the URL alone and ignores `Vary: rsc`, so an edge-cacheable flight
      // response gets served to the next browser as the page body. Only the
      // HTML document may carry the CDN cache header.
      ...publicHtmlCacheSources.map((source) => ({
        source,
        missing: [{ type: "header" as const, key: "rsc" }],
        headers: publicHtmlCacheHeaders,
      })),
      {
        source: "/:path*",
        headers: securityHeaders,
      },
    ];
  },
  async redirects() {
    return [
      {
        source: "/:path*",
        has: [{ type: "host", value: "petdex.crafter.run" }],
        destination: "https://petdex.dev/:path*",
        permanent: true,
      },
      {
        source: "/:path*",
        has: [{ type: "host", value: "www.petdex.crafter.run" }],
        destination: "https://petdex.dev/:path*",
        permanent: true,
      },
    ];
  },
  // In mock auth mode, redirect every Clerk import to in-process mocks
  // so contributors can boot without a Clerk backend secret. We set both
  // webpack and turbopack aliases since `next dev` defaults to turbopack
  // on recent versions.
  ...(IS_MOCK_AUTH
    ? {
        turbopack: {
          // Turbopack expects relative paths (with leading "./") rooted at
          // the project. Absolute paths get re-resolved as file paths
          // under cwd and 404. See nextjs/issues/turbopack-aliases.
          resolveAlias: {
            "@clerk/nextjs/server": "./src/lib/mock/clerk-server.ts",
            "@clerk/nextjs": "./src/lib/mock/clerk-client.tsx",
          },
        },
        webpack: (config: { resolve?: { alias?: Record<string, string> } }) => {
          config.resolve = config.resolve ?? {};
          config.resolve.alias = {
            ...(config.resolve.alias ?? {}),
            "@clerk/nextjs/server$": path.join(mockRoot, "clerk-server.ts"),
            "@clerk/nextjs$": path.join(mockRoot, "clerk-client.tsx"),
          };
          return config;
        },
      }
    : {}),
};

const withNextIntl = createNextIntlPlugin("./src/i18n/request.ts");

export default withNextIntl(nextConfig);