Remix Web 实战指南：Claude Code 实战指南

Remix开发を通过 Claude Code 加速

RemixはWeb標準に忠実な全栈框架で、ローダーとアクション通过数据フローが特徴です。借助 Claude Code，Remixの規約に沿ったコードを効率よく生成可以。

ルートとローダーの设计

数据获取パターン

> ブ日志文章の列表页面と详情页面をRemixで创建して。
> ローダーで数据获取、错误バウンダリも配置して。

// app/routes/blog._index.tsx
import { json } from '@remix-run/node';
import type { LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { getPosts } from '~/models/post.server';

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const page = Number(url.searchParams.get('page') || '1');
  const posts = await getPosts({ page, limit: 10 });
  return json({ posts, page });
}

export default function BlogIndex() {
  const { posts, page } = useLoaderData<typeof loader>();

  return (
    <div>
      <h1>ブログ記事一覧</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2><a href={`/blog/${post.slug}`}>{post.title}</a></h2>
          <p>{post.description}</p>
        </article>
      ))}
    </div>
  );
}

export function ErrorBoundary() {
  return <div>記事の読み込みに失敗しました。</div>;
}

アクション通过表单処理

プ日志レッシブエンハンスメント

> 评论发布表单をRemixのアクションで实现して。
> 验证付き、JS无效でも動作するように。

// app/routes/blog.$slug.tsx
import { json, redirect } from '@remix-run/node';
import type { ActionFunctionArgs } from '@remix-run/node';
import { Form, useActionData } from '@remix-run/react';
import { z } from 'zod';

const commentSchema = z.object({
  name: z.string().min(1, '名前は必須です'),
  body: z.string().min(5, 'コメントは5文字以上で入力してください'),
});

export async function action({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData();
  const result = commentSchema.safeParse(Object.fromEntries(formData));

  if (!result.success) {
    return json({ errors: result.error.flatten().fieldErrors }, { status: 400 });
  }

  await createComment({ slug: params.slug!, ...result.data });
  return redirect(`/blog/${params.slug}`);
}

export default function BlogPost() {
  const actionData = useActionData<typeof action>();

  return (
    <Form method="post">
      <div>
        <label htmlFor="name">Name</label>
        <input id="name" name="name" type="text" />
        {actionData?.errors?.name && <p>{actionData.errors.name}</p>}
      </div>
      <div>
        <label htmlFor="body">コメント</label>
        <textarea id="body" name="body" />
        {actionData?.errors?.body && <p>{actionData.errors.body}</p>}
      </div>
      <button type="submit">Submit</button>
    </Form>
  );
}

ネスティド路由

Remixのネスティド路由使用と、布局の共有や数据の并行获取が自然に実現可以。让 Claude Codeルート構造を相談すれば、最適な文件配置を提案してくれます。

> 管理画面のルート構造を设计して。
> 侧边栏布局共有、ダッシュボード/用户管理/配置の3セクション。

会话管理と认证

Remixの会话API使用…的认证实现も可以交给 Claude Code 处理。Cookie 会话存储の配置から、保護ルートの中间件的パターンまで一貫して生成可以。

总结

借助 Claude Code，RemixのWeb標準に沿った数据フロー设计や表单処理を快速实现可以。React开发指南や认证实现也建议一并参考。

Remix的详细信息请参阅Remix官方文档。