Giriş: Progressive Enhancement Geri Döndü

2026'da web standartları ön plana çıkarken, Remix v3 web'in temellerini yeniden merkezine alıyor: Formlar native HTML submit mantığıyla çalışıyor, istemci tarafı routing yerine güçlü server routing kullanılıyor ve JavaScript devre dışı kalsa dahi temel işlevler kusursuz işliyor.

1. Nested Routes Yapısı

app/routes/
├── _index.tsx              # Homepage
├── projects/
│   ├── _index.tsx          # /projects
│   ├── $projectId/
│   │   ├── _index.tsx      # /projects/:projectId
│   │   ├── tasks/
│   │   │   ├── _index.tsx  # /projects/:projectId/tasks
│   │   │   └── new.tsx     # /projects/:projectId/tasks/new
│   │   └── settings.tsx    # /projects/:projectId/settings
│   └── new.tsx             # /projects/new
└── admin/
    ├── users.tsx           # /admin/users
    └── analytics.tsx       # /admin/analytics

2. Root Layout

// app/root.tsx
import { Links, Meta, Outlet, Scripts } from '@remix-run/react';
import type { LoaderFunctionArgs } from '@remix-run/node';
import { json } from '@remix-run/node';
import stylesheet from '@/styles/global.css?url';

export const links = () => [
  { rel: 'stylesheet', href: stylesheet },
];

export async function loader({ request }: LoaderFunctionArgs) {
  const session = await getSession(request);
  return json({ user: session?.user || null });
}

export default function Root() {
  return (
    <html lang="tr">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <nav className="navbar">
          <a href="/">📋 ProjectHub</a>
          <ul>
            <li><a href="/projects">Projeler</a></li>
            <li><a href="/dashboard">Dashboard</a></li>
          </ul>
        </nav>
        <main><Outlet /></main>
        <Scripts />
      </body>
    </html>
  );
}

3. Projects Index with Loader + Action

// app/routes/projects._index.tsx
import { Form, Link, useLoaderData, useActionData } from '@remix-run/react';
import { json, redirect, type ActionFunctionArgs, type LoaderFunctionArgs } from '@remix-run/node';
import { z } from 'zod';

const createProjectSchema = z.object({
  name: z.string().min(3, 'Proje adı en az 3 karakter'),
  description: z.string().optional(),
});

export async function loader({ request }: LoaderFunctionArgs) {
  const userId = await requireUserId(request);
  const projects = await db.projects.findMany({
    where: { userId },
    orderBy: { createdAt: 'desc' },
  });
  return json({ projects });
}

export async function action({ request }: ActionFunctionArgs) {
  const userId = await requireUserId(request);
  
  if (request.method !== 'POST') {
    return json({ error: 'Method not allowed' }, { status: 405 });
  }

  const formData = await request.formData();
  const rawData = Object.fromEntries(formData);

  try {
    const validData = createProjectSchema.parse(rawData);
    
    const newProject = await db.projects.create({
      data: { userId, ...validData },
    });

    return redirect(`/projects/${newProject.id}`);
  } catch (error: unknown) {
    // ✅ DÜZELTME: Hata detayı ile dön
    if (error instanceof z.ZodError) {
      return json({ 
        error: error.errors[0]?.message || 'Validasyon hatası' 
      }, { status: 400 });
    }
    return json({ error: 'Sunucu hatası' }, { status: 500 });
  }
}

// ✅ DÜZELTME: Explicit type tanımı
type LoaderData = Awaited<ReturnType<typeof loader>>;
type ActionData = Awaited<ReturnType<typeof action>>;

export default function ProjectsIndex() {
  const { projects } = useLoaderData<LoaderData>();
  const actionData = useActionData<ActionData>();

  return (
    <div className="container mx-auto py-8">
      <div className="flex justify-between mb-8">
        <h1>Projeler</h1>
        <Link to="new" className="btn btn-primary">➕ Yeni Proje</Link>
      </div>

      <Form method="post" className="card bg-base-100 shadow-md mb-8">
        <div className="card-body">
          <h2 className="card-title">Hızlı Proje Oluştur</h2>
          
          {actionData?.error && (
            <div className="alert alert-error">
              <p>{actionData.error}</p>
            </div>
          )}

          <input
            type="text"
            name="name"
            placeholder="Proje adı"
            className="input input-bordered"
            required
          />
          
          <button type="submit" className="btn btn-primary">
            Oluştur
          </button>
        </div>
      </Form>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {projects.map((project) => (
          <Link
            key={project.id}
            to={`/projects/${project.id}`}
            className="card bg-base-100 shadow-md hover:shadow-lg"
          >
            <div className="card-body">
              <h2 className="card-title">{project.name}</h2>
              <p>{project.description}</p>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}

4. Nested Project Details

// app/routes/projects.$projectId._index.tsx
import { Link, useLoaderData, useParams, Outlet } from '@remix-run/react';
import { json, type LoaderFunctionArgs } from '@remix-run/node';

export async function loader({ params, request }: LoaderFunctionArgs) {
  const userId = await requireUserId(request);
  const { projectId } = params;

  const project = await db.projects.findUnique({
    where: { id: projectId },
  });

  if (!project || project.userId !== userId) {
    throw new Response('Not found', { status: 404 });
  }

  const tasks = await db.tasks.findMany({
    where: { projectId },
  });

  return json({ project, tasks });
}

// ✅ DÜZELTME: Explicit type
type LoaderData = Awaited<ReturnType<typeof loader>>;

export default function ProjectDetails() {
  const { project, tasks } = useLoaderData<LoaderData>();
  const { projectId } = useParams();

  return (
    <div className="container mx-auto py-8">
      <div className="tabs tabs-bordered mb-8">
        <Link to={`/projects/${projectId}`} className="tab tab-active">
          📋 Genel
        </Link>
        <Link to={`/projects/${projectId}/tasks`} className="tab">
          ✅ Görevler ({tasks.length})
        </Link>
        <Link to={`/projects/${projectId}/settings`} className="tab">
          ⚙️ Ayarlar
        </Link>
      </div>

      <Outlet context={{ project, tasks }} />
    </div>
  );
}

5. Progressive Enhancement Neden Önemli?

SEO: Server render sayesinde arama motorları tüm içeriği anında indeksler.
Erişilebilirlik: Standart HTML elementleri ekran okuyucularla doğrudan uyumludur.
Performans: JavaScript yüklenene kadar kullanıcı beklemek zorunda kalmaz, formlar anında etkileşimlidir.
Dirençlilik (Resilience): Kötü veya kopuk ağ bağlantılarında bile temel veri akışı bozulmaz.

Özet

Remix v3 ve React Router v7 mimarisi ile full-stack web geliştirme, nested routing, explicit type safety ve progressive enhancement disipliniyle çok daha sağlam bir temele oturuyor.