The Unexpected cross-platform in Next.js 15 vs SolidJS: A Head-to-Head

// next-app/app/api/cross-platform/route.ts
// Next.js 15 App Router API route with edge runtime support, error handling, and type safety
import { NextRequest, NextResponse } from 'next/server';
import { z } from 'zod';

// Validation schema for cross-platform request payloads
const CrossPlatformSchema = z.object({
  platform: z.enum(['web', 'ios', 'android', 'desktop']),
  userId: z.string().uuid(),
  metadata: z.record(z.string(), z.unknown()).optional(),
});

// In-memory cache for demo purposes (use Redis in production)
const responseCache = new Map();
const CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes

/**
 * Handle GET requests to /api/cross-platform
 * Supports edge runtime for Cloudflare/Vercel Edge, falls back to Node.js
 */
export const runtime = 'edge'; // Remove this line to use Node.js runtime

export async function GET(request: NextRequest) {
  try {
    // Extract query parameters with validation
    const { searchParams } = new URL(request.url);
    const platform = searchParams.get('platform');
    const userId = searchParams.get('userId');

    // Validate required parameters
    if (!platform || !userId) {
      return NextResponse.json(
        { error: 'Missing required query parameters: platform, userId' },
        { status: 400 }
      );
    }

    // Validate against schema
    const validationResult = CrossPlatformSchema.safeParse({
      platform,
      userId,
    });

    if (!validationResult.success) {
      return NextResponse.json(
        { error: 'Invalid request parameters', details: validationResult.error.flatten() },
        { status: 400 }
      );
    }

    const { platform: validatedPlatform, userId: validatedUserId } = validationResult.data;
    const cacheKey = `cross-platform:${validatedPlatform}:${validatedUserId}`;

    // Check cache first
    const cached = responseCache.get(cacheKey);
    if (cached && cached.expires > Date.now()) {
      return NextResponse.json(cached.data, {
        headers: { 'X-Cache': 'HIT' },
      });
    }

    // Simulate cross-platform data fetch (replace with real DB/API call)
    const platformData = await fetchPlatformData(validatedPlatform, validatedUserId);

    // Cache the response
    responseCache.set(cacheKey, {
      data: platformData,
      expires: Date.now() + CACHE_TTL_MS,
    });

    return NextResponse.json(platformData, {
      headers: { 'X-Cache': 'MISS' },
    });
  } catch (error) {
    console.error('Cross-platform API error:', error);
    // Edge runtime has limited error serialization, wrap appropriately
    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
    return NextResponse.json(
      { error: 'Internal server error', message: errorMessage },
      { status: 500 }
    );
  }
}

/**
 * Simulate platform-specific data fetch
 * In production, this would integrate with platform SDKs (iOS/Android)
 */
async function fetchPlatformData(platform: string, userId: string) {
  // Simulate network latency
  await new Promise((resolve) => setTimeout(resolve, 50));
  return {
    userId,
    platform,
    supportedFeatures: getSupportedFeatures(platform),
    lastActive: new Date().toISOString(),
  };
}

function getSupportedFeatures(platform: string) {
  const featureMap = {
    web: ['push-notifications', 'clipboard-api', 'webgl'],
    ios: ['face-id', 'apple-pay', 'widget-extension'],
    android: ['fingerprint-auth', 'google-pay', 'background-sync'],
    desktop: ['system-tray', 'file-system-access', 'native-menus'],
  };
  return featureMap[platform as keyof typeof featureMap] || [];
}

// solid-start/src/routes/api/cross-platform.ts
// SolidStart 0.7 API route with Deno/Bun/Node support, fine-grained reactivity, error handling
import { createServerRoute } from 'solid-start/server';
import { z } from 'zod';

// Reuse same validation schema for parity
const CrossPlatformSchema = z.object({
  platform: z.enum(['web', 'ios', 'android', 'desktop']),
  userId: z.string().uuid(),
  metadata: z.record(z.string(), z.unknown()).optional(),
});

// SolidStart uses island-based rendering, but API routes are server-first
// Supports Deno, Bun, Node.js runtimes without code changes
export const route = createServerRoute({
  // GET handler equivalent to Next.js route
  GET: async ({ request, params, query }) => {
    try {
      // Extract query parameters from SolidStart's query helper
      const platform = query('platform');
      const userId = query('userId');

      // Validate required parameters
      if (!platform || !userId) {
        return new Response(
          JSON.stringify({ error: 'Missing required query parameters: platform, userId' }),
          { status: 400, headers: { 'Content-Type': 'application/json' } }
        );
      }

      // Validate against schema
      const validationResult = CrossPlatformSchema.safeParse({
        platform,
        userId,
      });

      if (!validationResult.success) {
        return new Response(
          JSON.stringify({ error: 'Invalid request parameters', details: validationResult.error.flatten() }),
          { status: 400, headers: { 'Content-Type': 'application/json' } }
        );
      }

      const { platform: validatedPlatform, userId: validatedUserId } = validationResult.data;

      // SolidStart has built-in caching via solid-start/server cache helper
      // Cache key is automatically scoped to route + query params
      const data = await cache(
        async () => {
          // Simulate cross-platform data fetch (same as Next.js example)
          await new Promise((resolve) => setTimeout(resolve, 50));
          return {
            userId: validatedUserId,
            platform: validatedPlatform,
            supportedFeatures: getSupportedFeatures(validatedPlatform),
            lastActive: new Date().toISOString(),
          };
        },
        {
          key: `cross-platform:${validatedPlatform}:${validatedUserId}`,
          ttl: 5 * 60 * 1000, // 5 minutes
        }
      );

      return new Response(JSON.stringify(data), {
        headers: { 'Content-Type': 'application/json', 'X-Cache': 'MISS' },
      });
    } catch (error) {
      console.error('SolidStart cross-platform API error:', error);
      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
      return new Response(
        JSON.stringify({ error: 'Internal server error', message: errorMessage }),
        { status: 500, headers: { 'Content-Type': 'application/json' } }
      );
    }
  },
});

// Reuse feature map from Next.js example for parity
function getSupportedFeatures(platform: string) {
  const featureMap = {
    web: ['push-notifications', 'clipboard-api', 'webgl'],
    ios: ['face-id', 'apple-pay', 'widget-extension'],
    android: ['fingerprint-auth', 'google-pay', 'background-sync'],
    desktop: ['system-tray', 'file-system-access', 'native-menus'],
  };
  return featureMap[platform as keyof typeof featureMap] || [];
}

// SolidStart cache helper (simplified for example)
// In production, use Redis adapter via solid-start-redis
const cacheStore = new Map();
async function cache(fn: () => Promise, options: { key: string; ttl: number }): Promise {
  const cached = cacheStore.get(options.key);
  if (cached && cached.expires > Date.now()) {
    return cached.data as T;
  }
  const result = await fn();
  cacheStore.set(options.key, { data: result, expires: Date.now() + options.ttl });
  return result;
}

// Cross-platform dashboard component comparison
// Next.js 15 Client Component (app/dashboard/page.tsx)
'use client';

import { useState, useEffect, useCallback } from 'react';
import { CrossPlatformSchema } from '@/lib/schemas';

type PlatformData = {
  userId: string;
  platform: string;
  supportedFeatures: string[];
  lastActive: string;
};

export default function DashboardPage() {
  const [platformData, setPlatformData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [platform, setPlatform] = useState('web');
  const [userId] = useState('a1b2c3d4-5678-90ab-cdef-1234567890ab'); // Demo UUID

  const fetchData = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(`/api/cross-platform?platform=${platform}&userId=${userId}`);
      if (!res.ok) {
        throw new Error(`Failed to fetch: ${res.statusText}`);
      }
      const data = await res.json();
      // Validate response against schema
      const validation = CrossPlatformSchema.safeParse(data);
      if (!validation.success) {
        throw new Error(`Invalid response data: ${validation.error.message}`);
      }
      setPlatformData(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error occurred');
    } finally {
      setLoading(false);
    }
  }, [platform, userId]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  const handlePlatformChange = (e: React.ChangeEvent) => {
    setPlatform(e.target.value);
  };

  if (loading) {
    return (



    );
  }

  if (error) {
    return (


          Error Loading Dashboard
          {error}

            Retry



    );
  }

  return (

      Cross-Platform Dashboard


          Select Platform


          Web
          iOS
          Android
          Desktop


      {platformData && (

          Platform: {platformData.platform}
          User ID: {platformData.userId}
          Last Active: {new Date(platformData.lastActive).toLocaleString()}
          Supported Features

            {platformData.supportedFeatures.map((feature) => (


                {feature}

            ))}


      )}

  );
}

// Next.js 15 platform-specific dynamic import
const PlatformSpecificComponent = dynamic(
  () => import(`@/components/platform/${platform}`),
  {
    loading: () => Loading platform features...,
    ssr: false, // Disable SSR for platform-specific client code
  }
);

// SolidStart 0.7 edge-compatible API route (works on Cloudflare/Deno/Vercel Edge)
export const route = createServerRoute({
  GET: async ({ request }) => {
    // Edge runtimes only support Web APIs, no Node.js modules
    const data = await fetch('https://api.cloudflare.com/client/v4/ips', {
      headers: { Authorization: `Bearer ${request.env.CF_API_TOKEN}` },
    });
    return new Response(JSON.stringify(await data.json()));
  },
});

// SolidJS Error Boundary with platform telemetry
import { ErrorBoundary } from 'solid-js';
import * as Sentry from '@sentry/solidstart';

export default function App() {
  return (
     (

          Error: {err.message}
          Retry

      )}
      onError={(err) => {
        Sentry.captureException(err, {
          tags: { platform: navigator.userAgent },
        });
      }}
    >


  );
}