Hot Take: Next.js 15 Is Too Opinionated – Remix 3.0 Gives More Control to Developers

// app/users/[id]/page.tsx
// Next.js 15 App Router nested route with server action, error handling, loading state
import { notFound } from 'next/navigation';
import { revalidatePath } from 'next/cache';
import { db } from '@/lib/db';
import { UpdateUserForm } from './update-form';

// Server component to load user data
export default async function UserProfilePage({ params }: { params: { id: string } }) {
  try {
    // Validate user ID format
    if (!/^\d+$/.test(params.id)) {
      notFound();
    }

    const userId = parseInt(params.id, 10);
    const user = await db.user.findUnique({
      where: { id: userId },
      select: { id: true, name: true, email: true, role: true, createdAt: true },
    });

    if (!user) {
      notFound();
    }

    return (
      <div className="max-w-4xl mx-auto p-6">
        <h1 className="text-3xl font-bold mb-6">User Profile</h1>
        <div className="bg-white shadow rounded-lg p-6 mb-8">
          <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <dt className="text-sm font-medium text-gray-500">Name</dt>
              <dd className="mt-1 text-lg text-gray-900">{user.name}</dd>
            </div>
            <div>
              <dt className="text-sm font-medium text-gray-500">Email</dt>
              <dd className="mt-1 text-lg text-gray-900">{user.email}</dd>
            </div>
            <div>
              <dt className="text-sm font-medium text-gray-500">Role</dt>
              <dd className="mt-1 text-lg text-gray-900">{user.role}</dd>
            </div>
            <div>
              <dt className="text-sm font-medium text-gray-500">Joined</dt>
              <dd className="mt-1 text-lg text-gray-900">
                {new Date(user.createdAt).toLocaleDateString()}
              </dd>
            </div>
          </dl>
        </div>
        <UpdateUserForm userId={user.id} currentName={user.name} currentEmail={user.email} />
      </div>
    );
  } catch (error) {
    console.error('Failed to load user profile:', error);
    throw new Error('Failed to load user profile. Please try again later.');
  }
}

// Loading state (required for Next.js 15 App Router)
export async function Loading() {
  return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="animate-pulse">
        <div className="h-8 bg-gray-200 rounded w-1/3 mb-6"></div>
        <div className="bg-white shadow rounded-lg p-6 mb-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {[1, 2, 3, 4].map((i) => (
              <div key={i}>
                <div className="h-4 bg-gray-200 rounded w-1/4 mb-2"></div>
                <div className="h-6 bg-gray-200 rounded w-3/4"></div>
              </div>
            ))}
          </div>
        </div>
        <div className="h-64 bg-gray-200 rounded w-full"></div>
      </div>
    </div>
  );
}

// Error state (required for Next.js 15 App Router)
export async function Error({ error }: { error: Error }) {
  console.error('User profile error:', error);
  return (
    <div className="max-w-4xl mx-auto p-6 text-center">
      <h2 className="text-2xl font-bold text-red-600 mb-4">Failed to Load Profile</h2>
      <p className="text-gray-700 mb-6">{error.message}</p>
      <button
        onClick={() => window.location.reload()}
        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
      >
        Retry
      </button>
    </div>
  );
}

// app/routes/users.$id.tsx
// Remix 3.0 nested route with loader, action, error handling
import { LoaderFunctionArgs, ActionFunctionArgs, redirect, useRouteError, isRouteErrorResponse } from '@remix-run/node';
import { useLoaderData, useActionData, Form } from '@remix-run/react';
import { db } from '~/lib/db';
import { validateUserUpdate } from '~/lib/validators';

// Loader to fetch user data (runs on server by default)
export async function loader({ params }: LoaderFunctionArgs) {
  try {
    if (!/^\d+$/.test(params.id || '')) {
      throw new Response('Invalid user ID', { status: 404 });
    }

    const userId = parseInt(params.id!, 10);
    const user = await db.user.findUnique({
      where: { id: userId },
      select: { id: true, name: true, email: true, role: true, createdAt: true },
    });

    if (!user) {
      throw new Response('User not found', { status: 404 });
    }

    return { user };
  } catch (error) {
    console.error('Failed to load user:', error);
    throw new Response('Failed to load user profile. Please try again later.', { status: 500 });
  }
}

// Action to handle user updates (server-side mutation)
export async function action({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData();
  const userId = parseInt(params.id!, 10);
  const updates = {
    name: formData.get('name') as string,
    email: formData.get('email') as string,
  };

  // Validate input
  const validationErrors = validateUserUpdate(updates);
  if (validationErrors) {
    return { errors: validationErrors };
  }

  try {
    await db.user.update({
      where: { id: userId },
      data: updates,
    });
    return redirect(`/users/${userId}`);
  } catch (error) {
    console.error('Failed to update user:', error);
    return { errors: { general: 'Failed to update user. Please try again.' } };
  }
}

// Route component
export default function UserProfile() {
  const { user } = useLoaderData();
  const actionData = useActionData();

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">User Profile</h1>
      <div className="bg-white shadow rounded-lg p-6 mb-8">
        <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <dt className="text-sm font-medium text-gray-500">Name</dt>
            <dd className="mt-1 text-lg text-gray-900">{user.name}</dd>
          </div>
          <div>
            <dt className="text-sm font-medium text-gray-500">Email</dt>
            <dd className="mt-1 text-lg text-gray-900">{user.email}</dd>
          </div>
          <div>
            <dt className="text-sm font-medium text-gray-500">Role</dt>
            <dd className="mt-1 text-lg text-gray-900">{user.role}</dd>
          </div>
          <div>
            <dt className="text-sm font-medium text-gray-500">Joined</dt>
            <dd className="mt-1 text-lg text-gray-900">
              {new Date(user.createdAt).toLocaleDateString()}
            </dd>
          </div>
        </dl>
      </div>

      <div className="bg-white shadow rounded-lg p-6">
        <h2 className="text-2xl font-bold mb-4">Update Profile</h2>
        {actionData?.errors?.general && (
          <div className="mb-4 p-3 bg-red-50 text-red-700 rounded">{actionData.errors.general}</div>
        )}
        <Form method="post">
          <div className="mb-4">
            <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
              Name
            </label>
            <input
              type="text"
              id="name"
              name="name"
              defaultValue={user.name}
              className="w-full px-3 py-2 border border-gray-300 rounded-md"
              required
            />
            {actionData?.errors?.name && (
              <p className="mt-1 text-sm text-red-600">{actionData.errors.name}</p>
            )}
          </div>
          <div className="mb-6">
            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
              Email
            </label>
            <input
              type="email"
              id="email"
              name="email"
              defaultValue={user.email}
              className="w-full px-3 py-2 border border-gray-300 rounded-md"
              required
            />
            {actionData?.errors?.email && (
              <p className="mt-1 text-sm text-red-600">{actionData.errors.email}</p>
            )}
          </div>
          <button
            type="submit"
            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Save Changes
          </button>
        </Form>
      </div>
    </div>
  );
}

// Error boundary (Remix native error handling)
export function ErrorBoundary() {
  const error = useRouteError();
  console.error('User profile error:', error);
  return (
    <div className="max-w-4xl mx-auto p-6 text-center">
      <h2 className="text-2xl font-bold text-red-600 mb-4">Failed to Load Profile</h2>
      <p className="text-gray-700 mb-6">
        {isRouteErrorResponse(error) ? error.statusText : 'An unexpected error occurred.'}
      </p>
      <button
        onClick={() => window.location.reload()}
        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
      >
        Retry
      </button>
    </div>
  );
}

// app/routes/api.products.tsx
// Remix 3.0 custom stale-while-revalidate cache implementation for edge deployment
import { LoaderFunctionArgs } from '@remix-run/node';
import { db } from '~/lib/db';

// Cache configuration (TTL: 60 seconds, stale-while-revalidate: 300 seconds)
const CACHE_TTL = 60;
const CACHE_STALE = 300;

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const category = url.searchParams.get('category');
  const page = parseInt(url.searchParams.get('page') || '1', 10);
  const limit = parseInt(url.searchParams.get('limit') || '20', 10);

  // Validate query parameters
  if (page < 1 || limit < 1 || limit > 100) {
    throw new Response('Invalid query parameters', { status: 400 });
  }

  // Check for cached response in edge KV (e.g., Cloudflare Workers KV)
  const cacheKey = `products:${category || 'all'}:${page}:${limit}`;
  let cachedResponse;
  try {
    // Mock KV get - replace with actual edge KV client (e.g., @cloudflare/workers-kv)
    cachedResponse = await globalThis.KV?.get(cacheKey);
  } catch (error) {
    console.error('Failed to read from KV:', error);
    // Fall through to fetch fresh data if cache read fails
  }

  if (cachedResponse) {
    const { data, timestamp } = JSON.parse(cachedResponse);
    const age = (Date.now() - timestamp) / 1000;

    // If cached data is within TTL, return it directly
    if (age < CACHE_TTL) {
      return new Response(JSON.stringify(data), {
        headers: {
          'Content-Type': 'application/json',
          'Cache-Control': `public, max-age=${CACHE_TTL}, stale-while-revalidate=${CACHE_STALE}`,
          'X-Cache': 'HIT',
        },
      });
    }
  }

  // Fetch fresh data from database
  try {
    const where = category ? { category } : {};
    const products = await db.product.findMany({
      where,
      skip: (page - 1) * limit,
      take: limit,
      select: { id: true, name: true, price: true, category: true, stock: true },
    });

    const total = await db.product.count({ where });
    const responseData = { products, total, page, limit };

    // Store fresh data in edge KV
    try {
      await globalThis.KV?.put(
        cacheKey,
        JSON.stringify({ data: responseData, timestamp: Date.now() }),
        { expirationTtl: CACHE_TTL + CACHE_STALE }
      );
    } catch (error) {
      console.error('Failed to write to KV:', error);
    }

    return new Response(JSON.stringify(responseData), {
      headers: {
        'Content-Type': 'application/json',
        'Cache-Control': `public, max-age=${CACHE_TTL}, stale-while-revalidate=${CACHE_STALE}`,
        'X-Cache': 'MISS',
      },
    });
  } catch (error) {
    console.error('Failed to fetch products:', error);
    throw new Response('Failed to fetch products. Please try again later.', { status: 500 });
  }
}

// Migrate Next.js data fetching to Remix loader
// Before (Next.js 15):
async function getData() { ... }
export default async function Page() {
  const data = await getData(); // Ambiguous if this runs on server or client
  return <div>{data.name}</div>;
}

// After (Remix 3.0):
export async function loader() {
  const data = await getData(); // Explicitly runs on server
  return { data };
}
export default function Page() {
  const { data } = useLoaderData();
  return <div>{data.name}</div>;
}

// Type-safe mutation with Remix action + Zod
import { z } from 'zod';
const updateUserSchema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
});

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const result = updateUserSchema.safeParse(Object.fromEntries(formData));
  if (!result.success) {
    return { errors: result.error.flatten().fieldErrors };
  }
  // Update user logic
}

// Remix nested route with shared layout
// app/routes/dashboard.tsx (parent layout)
export async function loader() {
  const permissions = await getPermissions();
  return { permissions };
}
export default function DashboardLayout() {
  const { permissions } = useLoaderData();
  return (
    <div>
      <DashboardNav permissions={permissions} />
      <Outlet /> {/* Renders child routes */}
    </div>
  );
}

// app/routes/dashboard.settings.tsx (child route)
export default function Settings() {
  const { permissions } = useRouteLoaderData('routes/dashboard');
  return <div>Settings (Permissions: {permissions.join(', ')})</div>;
}