Why Next.js 15 Is Overrated: Remix 3.0 Is Better for Large Teams in 2026

// app/routes/dashboard.tsx
// Remix 3.0 Dashboard Route with full error handling, loader, action, and meta
import { json, type LoaderFunctionArgs, type ActionFunctionArgs } from \"@remix-run/node\";
import { useLoaderData, useActionData, Form, useNavigation } from \"@remix-run/react\";
import { requireUserSession } from \"~/utils/session.server\";
import { getDashboardMetrics, updateDashboardPreferences } from \"~/models/dashboard.server\";
import { validatePreferences } from \"~/utils/validators\";
import { ErrorBoundary } from \"~/components/ErrorBoundary\";

// Loader: Fetches data on the server, runs before component renders
export async function loader({ request }: LoaderFunctionArgs) {
  try {
    // Authenticate user first – throws 401 if invalid
    const user = await requireUserSession(request);
    // Fetch dashboard metrics with 5s timeout to prevent hanging requests
    const metrics = await Promise.race([
      getDashboardMetrics(user.id),
      new Promise((_, reject) => setTimeout(() => reject(new Error(\"Metrics fetch timeout\")), 5000))
    ]) as Awaited>;
    // Return serialized data – Remix handles JSON serialization automatically
    return json({
      user: { id: user.id, name: user.name, role: user.role },
      metrics,
      lastUpdated: new Date().toISOString(),
    });
  } catch (error) {
    // Handle known errors with appropriate status codes
    if (error instanceof Response) throw error;
    if (error instanceof Error && error.message === \"Metrics fetch timeout\") {
      throw json({ message: \"Dashboard metrics timed out. Please refresh.\" }, { status: 504 });
    }
    // Log unexpected errors to observability platform
    console.error(\"Dashboard loader error:\", error);
    throw json({ message: \"Failed to load dashboard data\" }, { status: 500 });
  }
}

// Action: Handles form submissions (POST/PUT/DELETE) from the route
export async function action({ request }: ActionFunctionArgs) {
  try {
    const user = await requireUserSession(request);
    const formData = await request.formData();
    const preferences = Object.fromEntries(formData);
    // Validate input against schema
    const validationResult = validatePreferences(preferences);
    if (!validationResult.success) {
      return json({ errors: validationResult.errors }, { status: 400 });
    }
    // Update preferences in database
    await updateDashboardPreferences(user.id, validationResult.data);
    return json({ success: true, message: \"Preferences updated successfully\" });
  } catch (error) {
    if (error instanceof Response) throw error;
    console.error(\"Dashboard action error:\", error);
    return json({ errors: [\"Failed to update preferences\"] }, { status: 500 });
  }
}

// Meta: Sets page title and meta tags for SEO
export const meta: MetaFunction = ({ data }) => {
  return [
    { title: `Dashboard | ${data?.user?.name ?? \"User\"}` },
    { name: \"description\", content: \"Real-time dashboard with team metrics and preferences\" },
  ];
};

// Main component
export default function Dashboard() {
  const { user, metrics, lastUpdated } = useLoaderData();
  const actionData = useActionData();
  const navigation = useNavigation();
  const isSubmitting = navigation.state === \"submitting\";

  return (


        Welcome back, {user.name}
        Last updated: {new Date(lastUpdated).toLocaleString()}



        {metrics.map((metric) => (

            {metric.label}
            {metric.value}

              {metric.trend === \"up\" ? \"↑\" : \"↓\"} {metric.change}%


        ))}



        Dashboard Preferences
        {actionData?.success && (
          {actionData.message}
        )}
        {actionData?.errors && (

            {actionData.errors.map((err) => {err})}

        )}



            Show revenue metrics



            Show user growth metrics


            {isSubmitting ? \"Saving...\" : \"Save Preferences\"}




  );
}

// Error boundary for this route – catches all errors thrown in loader/action/component
export { ErrorBoundary };

// app/dashboard/page.tsx
// Next.js 15 App Router Dashboard Page – equivalent functionality to Remix example
import { requireUserSession } from \"@/utils/session\";
import { getDashboardMetrics, updateDashboardPreferences } from \"@/models/dashboard\";
import { validatePreferences } from \"@/utils/validators\";
import { cookies } from \"next/headers\";
import { notFound, redirect } from \"next/navigation\";
import { Suspense } from \"react\";
import DashboardSkeleton from \"./loading\";
import PreferencesForm from \"./PreferencesForm\";

// Server Component: Replaces Remix loader – runs on server, can be async
export default async function DashboardPage() {
  try {
    // Authenticate user – Next.js requires manual session handling via cookies
    const cookieStore = await cookies();
    const user = await requireUserSession(cookieStore);
    if (!user) redirect(\"/login\");

    // Fetch metrics with timeout – no built-in race utility, so manual implementation
    let metrics;
    try {
      const metricsPromise = getDashboardMetrics(user.id);
      const timeoutPromise = new Promise((_, reject) => 
        setTimeout(() => reject(new Error(\"Metrics timeout\")), 5000)
      );
      metrics = await Promise.race([metricsPromise, timeoutPromise]);
    } catch (error) {
      // Next.js requires throwing special notFound/redirect or returning error object
      if (error instanceof Error && error.message === \"Metrics timeout\") {
        // No built-in way to return 504, so render error component
        return Dashboard metrics timed out. Please refresh.;
      }
      // Log error and render generic error
      console.error(\"Dashboard fetch error:\", error);
      return Failed to load dashboard data;
    }

    // No built-in meta export – must use generateMetadata function
    return (


          Welcome back, {user.name}
          Last updated: {new Date().toLocaleString()}



          }>
            {metrics.map((metric: any) => (

                {metric.label}
                {metric.value}

                  {metric.trend === \"up\" ? \"↑\" : \"↓\"} {metric.change}%


            ))}



        {/* Form handling requires separate client component or server action */}


    );
  } catch (error) {
    // Unhandled errors fall back to global error.tsx – no per-route error boundary by default
    console.error(\"Dashboard page error:\", error);
    throw error; // Triggers global error boundary
  }
}

// Next.js 15 requires separate generateMetadata for SEO – equivalent to Remix meta export
export async function generateMetadata({ params }: { params: { userId: string } }) {
  // Must fetch user data again here, since server components don't share state
  const cookieStore = await cookies();
  const user = await requireUserSession(cookieStore);
  return {
    title: `Dashboard | ${user?.name ?? \"User\"}`,
    description: \"Real-time dashboard with team metrics and preferences\",
  };
}

// Server Action for form handling – equivalent to Remix action
export async function updatePreferences(formData: FormData, userId: string) {
  \"use server\"; // Next.js 15 server action directive
  try {
    const preferences = Object.fromEntries(formData);
    const validationResult = validatePreferences(preferences);
    if (!validationResult.success) {
      return { errors: validationResult.errors };
    }
    await updateDashboardPreferences(userId, validationResult.data);
    return { success: true, message: \"Preferences updated successfully\" };
  } catch (error) {
    console.error(\"Preferences update error:\", error);
    return { errors: [\"Failed to update preferences\"] };
  }
}

// benchmark-builds.mjs
// Node.js script to benchmark Next.js 15 vs Remix 3.0 build times for large apps
import { execSync } from \"child_process\";
import { writeFileSync, readFileSync, mkdirSync, rmSync } from \"fs\";
import { join } from \"path\";

// Configuration: Matches large team app profile (50+ routes, 100+ components)
const BENCHMARK_CONFIG = {
  nextAppName: \"next15-bench-app\",
  remixAppName: \"remix3-bench-app\",
  routeCount: 60, // 60 routes to simulate large app
  componentCount: 120, // 120 shared components
  iterations: 10, // Run 10 builds to get average
  nextVersion: \"15.0.0\",
  remixVersion: \"3.0.0\",
};

// Helper to create a mock large Next.js 15 app
function createNextApp(appPath) {
  rmSync(appPath, { recursive: true, force: true });
  mkdirSync(appPath, { recursive: true });
  // Initialize Next.js 15 app
  execSync(`npx create-next-app@${BENCHMARK_CONFIG.nextVersion} ${appPath} --typescript --eslint --no-tailwind --no-src-dir --app --import-alias \"@/*\"`, {
    stdio: \"inherit\",
  });
  // Generate 60 routes
  for (let i = 0; i < BENCHMARK_CONFIG.routeCount; i++) {
    const routePath = join(appPath, \"app\", `route-${i}`, \"page.tsx\");
    mkdirSync(join(appPath, \"app\", `route-${i}`), { recursive: true });
    writeFileSync(routePath, `
      export default function Route${i}() {
        return Route ${i} Content
      }
    `);
  }
  // Generate 120 shared components
  mkdirSync(join(appPath, \"components\"), { recursive: true });
  for (let i = 0; i < BENCHMARK_CONFIG.componentCount; i++) {
    writeFileSync(join(appPath, \"components\", `Component${i}.tsx`), `
      export default function Component${i}() {
        return Shared Component ${i}
      }
    `);
  }
}

// Helper to create a mock large Remix 3.0 app
function createRemixApp(appPath) {
  rmSync(appPath, { recursive: true, force: true });
  mkdirSync(appPath, { recursive: true });
  // Initialize Remix 3.0 app
  execSync(`npx create-remix@${BENCHMARK_CONFIG.remixVersion} ${appPath} --typescript --no-tailwind --no-eslint`, {
    stdio: \"inherit\",
  });
  // Generate 60 routes (Remix uses file-based routing in app/routes)
  for (let i = 0; i < BENCHMARK_CONFIG.routeCount; i++) {
    writeFileSync(join(appPath, \"app\", \"routes\", `route-${i}.tsx`), `
      import { LoaderFunctionArgs } from \"@remix-run/node\";
      export async function loader({ request }: LoaderFunctionArgs) {
        return { routeId: ${i} };
      }
      export default function Route${i}() {
        const data = useLoaderData();
        return Route ${i} Content (ID: {data.routeId})
      }
    `);
  }
  // Generate 120 shared components
  mkdirSync(join(appPath, \"app\", \"components\"), { recursive: true });
  for (let i = 0; i < BENCHMARK_CONFIG.componentCount; i++) {
    writeFileSync(join(appPath, \"app\", \"components\", `Component${i}.tsx`), `
      export default function Component${i}() {
        return Shared Component ${i}
      }
    `);
  }
}

// Run build benchmark for a given app
function runBuildBenchmark(appPath, buildCommand) {
  const times = [];
  for (let i = 0; i < BENCHMARK_CONFIG.iterations; i++) {
    const start = Date.now();
    try {
      execSync(buildCommand, { cwd: appPath, stdio: \"pipe\" });
      const end = Date.now();
      times.push(end - start);
    } catch (error) {
      console.error(`Build failed for iteration ${i}:`, error.message);
      times.push(NaN);
    }
  }
  // Filter out failed builds and calculate average
  const validTimes = times.filter((t) => !isNaN(t));
  const average = validTimes.reduce((a, b) => a + b, 0) / validTimes.length;
  const min = Math.min(...validTimes);
  const max = Math.max(...validTimes);
  return { average, min, max, successRate: (validTimes.length / BENCHMARK_CONFIG.iterations) * 100 };
}

// Main benchmark execution
async function main() {
  console.log(\"Starting build benchmark for Next.js 15 vs Remix 3.0...\");
  console.log(`Config: ${BENCHMARK_CONFIG.routeCount} routes, ${BENCHMARK_CONFIG.componentCount} components, ${BENCHMARK_CONFIG.iterations} iterations`);

  // Create test apps
  console.log(\"Creating Next.js 15 test app...\");
  createNextApp(BENCHMARK_CONFIG.nextAppName);
  console.log(\"Creating Remix 3.0 test app...\");
  createRemixApp(BENCHMARK_CONFIG.remixAppName);

  // Run Next.js 15 benchmarks
  console.log(\"Running Next.js 15 build benchmarks...\");
  const nextResults = runBuildBenchmark(BENCHMARK_CONFIG.nextAppName, \"npm run build\");

  // Run Remix 3.0 benchmarks
  console.log(\"Running Remix 3.0 build benchmarks...\");
  const remixResults = runBuildBenchmark(BENCHMARK_CONFIG.remixAppName, \"npm run build\");

  // Output results
  console.log(\"\\n=== Benchmark Results ===\");
  console.log(`Next.js 15 Average Build Time: ${nextResults.average.toFixed(2)}ms`);
  console.log(`Next.js 15 Min/Max Build Time: ${nextResults.min}ms / ${nextResults.max}ms`);
  console.log(`Next.js 15 Build Success Rate: ${nextResults.successRate}%`);
  console.log(`Remix 3.0 Average Build Time: ${remixResults.average.toFixed(2)}ms`);
  console.log(`Remix 3.0 Min/Max Build Time: ${remixResults.min}ms / ${remixResults.max}ms`);
  console.log(`Remix 3.0 Build Success Rate: ${remixResults.successRate}%`);
  console.log(`Remix 3.0 is ${(nextResults.average / remixResults.average).toFixed(2)}x faster than Next.js 15`);

  // Save results to JSON
  writeFileSync(\"benchmark-results.json\", JSON.stringify({
    next: nextResults,
    remix: remixResults,
    config: BENCHMARK_CONFIG,
  }, null, 2));
  console.log(\"Results saved to benchmark-results.json\");

  // Cleanup test apps
  rmSync(BENCHMARK_CONFIG.nextAppName, { recursive: true, force: true });
  rmSync(BENCHMARK_CONFIG.remixAppName, { recursive: true, force: true });
}

main().catch(console.error);

// Remix nested route example: app/routes/products.$productId.tsx (parent)
export async function loader({ params }: LoaderFunctionArgs) {
  const product = await getProduct(params.productId);
  return json({ product });
}

export default function ProductLayout() {
  const { product } = useLoaderData();
  return (

      {product.name}
       {/* Renders child routes like reviews, specs */}

  );
}

// Remix action with Zod validation and audit logging
import { z } from \"zod\";

const UpdateProductSchema = z.object({
  name: z.string().min(3),
  price: z.number().positive(),
});

export async function action({ request, params }: ActionFunctionArgs) {
  const user = await requireUserSession(request);
  const formData = await request.formData();
  const auditLog = await createAuditLog(user.id, \"update-product\", params.productId);
  const validation = UpdateProductSchema.safeParse(Object.fromEntries(formData));
  if (!validation.success) {
    return json({ errors: validation.error.flatten().fieldErrors }, { status: 400 });
  }
  await updateProduct(params.productId, validation.data);
  await auditLog.success();
  return json({ success: true });
}

// Remix Link with prefetching (enabled by default)
import { Link } from \"@remix-run/react\";

// Prefetches /products/123 loader data when user hovers over link

  View Product


// Disable prefetching for low-priority links

  Terms of Service