Hot Take: Next.js 15 Is Becoming Too Complex – Remix 3 Is the Better Choice for React 19 Apps

// next.js 15 app router server component with react 19 features
// demonstrates required boilerplate for basic data fetching
import { Suspense } from 'react';
import { notFound } from 'next/navigation';
import { sql } from '@vercel/postgres'; // next.js 15 recommended db client

type User = {
  id: string;
  name: string;
  email: string;
  created_at: Date;
};

type Post = {
  id: string;
  title: string;
  content: string;
  author_id: string;
  created_at: Date;
};

// next.js 15 requires explicit server component annotation (optional but recommended)
export const dynamic = 'force-dynamic'; // disable static optimization for this demo
export const revalidate = 0; // disable ISR revalidation

async function getUserPosts(userId: string): Promise<{ user: User | null; posts: Post[] }> {
  try {
    // next.js 15 server components support async/await natively
    const userRes = await sql<User>`
      SELECT id, name, email, created_at 
      FROM users 
      WHERE id = ${userId}
      LIMIT 1
    `;

    const user = userRes.rows[0] || null;

    if (!user) {
      notFound(); // next.js 15 built-in 404 handler
    }

    const postsRes = await sql<Post>`
      SELECT id, title, content, author_id, created_at
      FROM posts
      WHERE author_id = ${userId}
      ORDER BY created_at DESC
    `;

    return { user, posts: postsRes.rows };
  } catch (error) {
    // next.js 15 error handling: must throw to trigger error.tsx boundary
    console.error('Failed to fetch user posts:', error);
    throw new Error('Failed to load user data. Please try again later.');
  }
}

// loading fallback required for suspense in next.js 15 app router
function PostsLoading() {
  return (
    <div className="animate-pulse space-y-4">
      <div className="h-8 bg-gray-200 rounded w-1/4"></div>
      {[...Array(3)].map((_, i) => (
        <div key={i} className="space-y-2">
          <div className="h-6 bg-gray-200 rounded w-3/4"></div>
          <div className="h-4 bg-gray-200 rounded w-full"></div>
          <div className="h-4 bg-gray-200 rounded w-5/6"></div>
        </div>
      ))}
    </div>
  );
}

// main page component (server component by default in app router)
export default async function UserProfilePage({
  params,
}: {
  params: { userId: string };
}) {
  // next.js 15 requires awaiting params in server components
  const { userId } = await params;

  return (
    <main className="max-w-4xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-8">User Profile</h1>
      <Suspense fallback={<PostsLoading />}>
        <UserProfileContent userId={userId} />
      </Suspense>
    </main>
  );
}

// separate component to wrap data fetching for suspense
async function UserProfileContent({ userId }: { userId: string }) {
  const { user, posts } = await getUserPosts(userId);

  return (
    <div className="space-y-8">
      <section className="bg-white p-6 rounded-lg shadow">
        <h2 className="text-2xl font-semibold mb-4">{user.name}</h2>
        <p className="text-gray-600 mb-2">Email: {user.email}</p>
        <p className="text-gray-500 text-sm">
          Joined: {new Date(user.created_at).toLocaleDateString()}
        </p>
      </section>

      <section>
        <h2 className="text-2xl font-semibold mb-4">Posts</h2>
        {posts.length === 0 ? (
          <p className="text-gray-500">No posts yet.</p>
        ) : (
          <div className="space-y-4">
            {posts.map((post) => (
              <article key={post.id} className="bg-white p-6 rounded-lg shadow">
                <h3 className="text-xl font-medium mb-2">{post.title}</h3>
                <p className="text-gray-600 line-clamp-3">{post.content}</p>
                <p className="text-gray-500 text-sm mt-2">
                  Posted: {new Date(post.created_at).toLocaleDateString()}
                </p>
              </article>
            ))}
          </div>
        )}
      </section>
    </div>
  );
}

// remix 3 route component equivalent to next.js 15 example above
// demonstrates zero-config server component support and simplified data fetching
import { useLoaderData, LoaderFunctionArgs, json } from '@remix-run/node';
import { useRouteError } from '@remix-run/react';
import { Suspense } from 'react';
import { db } from '~/utils/db.server'; // local db client, remix 3 supports any node db driver
import { Post, User } from '~/types'; // local type definitions

// remix 3 loader function: runs on server, equivalent to next.js server component data fetching
export async function loader({ params }: LoaderFunctionArgs) {
  const { userId } = params;

  if (!userId) {
    throw new Response('User ID is required', { status: 400 });
  }

  try {
    // remix 3 supports async/await in loaders natively, no special config
    const user = await db.user.findUnique({
      where: { id: userId },
    });

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

    const posts = await db.post.findMany({
      where: { authorId: userId },
      orderBy: { createdAt: 'desc' },
    });

    // remix 3 json helper automatically sets correct content-type headers
    return json({ user, posts });
  } catch (error) {
    // remix 3 error handling: throw response to trigger error boundary
    console.error('Failed to fetch user data:', error);
    throw new Response('Failed to load user data. Please try again later.', {
      status: 500,
    });
  }
}

// loading fallback for suspense (remix 3 supports react 19 suspense natively)
function PostsLoading() {
  return (
    <div className="animate-pulse space-y-4">
      <div className="h-8 bg-gray-200 rounded w-1/4"></div>
      {[...Array(3)].map((_, i) => (
        <div key={i} className="space-y-2">
          <div className="h-6 bg-gray-200 rounded w-3/4"></div>
          <div className="h-4 bg-gray-200 rounded w-full"></div>
          <div className="h-4 bg-gray-200 rounded w-5/6"></div>
        </div>
      ))}
    </div>
  );
}

// remix 3 route component: uses loader data via useLoaderData
export default function UserProfileRoute() {
  const { user, posts } = useLoaderData<typeof loader>();

  return (
    <main className="max-w-4xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-8">User Profile</h1>
      <Suspense fallback={<PostsLoading />}>
        <UserProfileContent user={user} posts={posts} />
      </Suspense>
    </main>
  );
}

// client or server component: remix 3 lets you choose, no framework enforced mode
function UserProfileContent({
  user,
  posts,
}: {
  user: User;
  posts: Post[];
}) {
  return (
    <div className="space-y-8">
      <section className="bg-white p-6 rounded-lg shadow">
        <h2 className="text-2xl font-semibold mb-4">{user.name}</h2>
        <p className="text-gray-600 mb-2">Email: {user.email}</p>
        <p className="text-gray-500 text-sm">
          Joined: {new Date(user.createdAt).toLocaleDateString()}
        </p>
      </section>

      <section>
        <h2 className="text-2xl font-semibold mb-4">Posts</h2>
        {posts.length === 0 ? (
          <p className="text-gray-500">No posts yet.</p>
        ) : (
          <div className="space-y-4">
            {posts.map((post) => (
              <article key={post.id} className="bg-white p-6 rounded-lg shadow">
                <h3 className="text-xl font-medium mb-2">{post.title}</h3>
                <p className="text-gray-600 line-clamp-3">{post.content}</p>
                <p className="text-gray-500 text-sm mt-2">
                  Posted: {new Date(post.createdAt).toLocaleDateString()}
                </p>
              </article>
            ))}
          </div>
        )}
      </section>
    </div>
  );
}

// remix 3 error boundary: required for route-level error handling
export function ErrorBoundary() {
  const error = useRouteError();

  return (
    <div className="max-w-4xl mx-auto p-6 text-center">
      <h1 className="text-2xl font-bold text-red-600 mb-4">Something went wrong</h1>
      <p className="text-gray-600">
        {error instanceof Error ? error.message : 'Unknown error occurred'}
      </p>
    </div>
  );
}

// remix 3 action function example: handle form submissions with react 19 features
// demonstrates remix 3's built-in form handling and server action support
import { useLoaderData, useActionData, Form, redirect, useNavigation } from '@remix-run/react';
import { LoaderFunctionArgs, ActionFunctionArgs, json } from '@remix-run/node';
import { useRouteError } from '@remix-run/react';
import { db } from '~/utils/db.server';
import { requireUserId } from '~/utils/auth.server'; // custom auth helper

type ActionData = {
  errors?: {
    title?: string;
    content?: string;
  };
  success?: boolean;
};

type LoaderData = {
  userId: string;
};

// loader to get current user id (requires authentication)
export async function loader({ request }: LoaderFunctionArgs) {
  const userId = await requireUserId(request); // throws 401 if not authenticated
  return json({ userId });
}

// action function: handles POST requests from remix <Form> component
export async function action({ request }: ActionFunctionArgs) {
  const userId = await requireUserId(request);
  const formData = await request.formData();
  const title = formData.get('title')?.toString();
  const content = formData.get('content')?.toString();

  const errors: ActionData['errors'] = {};

  // server-side validation
  if (!title || title.trim().length < 5) {
    errors.title = 'Title must be at least 5 characters long';
  }

  if (!content || content.trim().length < 20) {
    errors.content = 'Content must be at least 20 characters long';
  }

  if (Object.keys(errors).length > 0) {
    // return validation errors to the client
    return json<ActionData>({ errors }, { status: 400 });
  }

  try {
    // create post in database
    await db.post.create({
      data: {
        title: title!.trim(),
        content: content!.trim(),
        authorId: userId,
      },
    });

    // redirect to posts page on success (remix 3 built-in redirect)
    return redirect('/posts');
  } catch (error) {
    console.error('Failed to create post:', error);
    return json<ActionData>(
      { errors: { title: 'Failed to create post. Please try again.' } },
      { status: 500 }
    );
  }
}

// component to render form and handle action data
export default function CreatePostRoute() {
  const { userId } = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';

  return (
    <main className="max-w-2xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-8">Create New Post</h1>
      <Form method="post" className="space-y-6">
        <div>
          <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
            Title
          </label>
          <input
            type="text"
            name="title"
            id="title"
            defaultValue={actionData?.errors?.title ? '' : undefined}
            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            aria-invalid={actionData?.errors?.title ? 'true' : undefined}
            aria-describedby="title-error"
          />
          {actionData?.errors?.title && (
            <p id="title-error" className="mt-1 text-sm text-red-600">
              {actionData.errors.title}
            </p>
          )}
        </div>

        <div>
          <label htmlFor="content" className="block text-sm font-medium text-gray-700 mb-1">
            Content
          </label>
          <textarea
            name="content"
            id="content"
            rows={6}
            defaultValue={actionData?.errors?.content ? '' : undefined}
            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            aria-invalid={actionData?.errors?.content ? 'true' : undefined}
            aria-describedby="content-error"
          />
          {actionData?.errors?.content && (
            <p id="content-error" className="mt-1 text-sm text-red-600">
              {actionData.errors.content}
            </p>
          )}
        </div>

        <button
          type="submit"
          disabled={isSubmitting}
          className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed"
        >
          {isSubmitting ? 'Creating...' : 'Create Post'}
        </button>

        {actionData?.success && (
          <p className="text-green-600 text-sm">Post created successfully!</p>
        )}
      </Form>
    </main>
  );
}

// error boundary for this route
export function ErrorBoundary() {
  const error = useRouteError();
  return (
    <div className="max-w-2xl mx-auto p-6 text-center">
      <h1 className="text-2xl font-bold text-red-600 mb-4">Error Creating Post</h1>
      <p className="text-gray-600">
        {error instanceof Error ? error.message : 'An unknown error occurred'}
      </p>
    </div>
  );
}

// audit-next-flags.js
const fs = require('fs');
const path = require('path');

const nextConfigPath = path.join(process.cwd(), 'next.config.js');
const nextConfig = fs.existsSync(nextConfigPath) ? require(nextConfigPath) : {};

const experimentalFlags = nextConfig.experimental || {};

console.log('Enabled Next.js Experimental Flags:');
Object.entries(experimentalFlags).forEach(([key, value]) => {
  if (value === true) {
    console.log(`- ${key}`);
  }
});

console.log(`\nTotal enabled experimental flags: ${Object.values(experimentalFlags).filter(v => v === true).length}`);

// app/routes/posts.$postId.tsx (remix 3 flat file route)
import { useLoaderData } from '@remix-run/react';
import { use } from 'react';

export async function loader({ params }: { params: { postId: string } }) {
  const post = await fetch(`https://api.example.com/posts/${params.postId}`).then(r => r.json());
  return { post: new Promise(resolve => resolve(post)) }; // pass promise to client
}

export default function PostRoute() {
  const { post } = useLoaderData<typeof loader>();
  const resolvedPost = use(post); // react 19 use() hook to unwrap promise

  return (
    <article>
      <h1>{resolvedPost.title}</h1>
      <p>{resolvedPost.content}</p>
    </article>
  );
}

# benchmark-build.sh
hyperfine --warmup 3 --runs 10 \
  "next build" \
  "remix build" \
  --export-markdown build-benchmarks.md