加速Next.js Full-Stack Development：Claude Code 实战指南

Next.js × 通过 Claude Code全栈开发

Next.jsのApp Routerは、前端と后端を集成的に开发できる框架です。与 Claude Code組み合わせることで、页面、APIルート、数据库联动までを一気に构建可以。

项目の初期セットアップ

> Next.js 14 + TypeScript + Tailwind CSS + Prismaの
> 项目创建。App Routerを使用。
> 以下结构で：
> - src/app: 页面・布局
> - src/components: 共通组件
> - src/lib: ユーティリティ・DB接続
> - prisma: Schema・迁移

Server Componentsの活用

数据フェッチングをServer Componentsで行うパターンを生成させます。

> ブ日志文章列表页面をServer Componentで创建して。
> Prismaから数据获取。分页支持。

// src/app/posts/page.tsx
import { prisma } from "@/lib/prisma";
import { PostCard } from "@/components/PostCard";
import { Pagination } from "@/components/Pagination";

interface Props {
  searchParams: Promise<{ page?: string }>;
}

export default async function PostsPage({ searchParams }: Props) {
  const { page: pageParam } = await searchParams;
  const page = Number(pageParam) || 1;
  const perPage = 12;

  const [posts, total] = await Promise.all([
    prisma.post.findMany({
      take: perPage,
      skip: (page - 1) * perPage,
      orderBy: { createdAt: "desc" },
      include: { author: { select: { name: true, avatar: true } } },
    }),
    prisma.post.count(),
  ]);

  return (
    <main className="container mx-auto px-4 py-8">
      <h1 className="mb-8 text-3xl font-bold">記事一覧</h1>
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {posts.map((post) => (
          <PostCard key={post.id} post={post} />
        ))}
      </div>
      <Pagination
        currentPage={page}
        totalPages={Math.ceil(total / perPage)}
        basePath="/posts"
      />
    </main>
  );
}

export const metadata = {
  title: "記事一覧",
  description: "すべての記事を表示します",
};

Server Actionsの活用

表单処理をServer Actionsで实现します。

> 文章创建表单をServer Actionsで实现して。
> 验证はzod、错误处理も含めて。

// src/app/posts/new/actions.ts
"use server";

import { prisma } from "@/lib/prisma";
import { redirect } from "next/navigation";
import { z } from "zod";

const CreatePostSchema = z.object({
  title: z.string().min(1, "タイトルは必須です").max(200),
  content: z.string().min(10, "本文は10文字以上必要です"),
  published: z.boolean().default(false),
});

export type FormState = {
  errors?: Record<string, string[]>;
  message?: string;
};

export async function createPost(
  prevState: FormState,
  formData: FormData
): Promise<FormState> {
  const parsed = CreatePostSchema.safeParse({
    title: formData.get("title"),
    content: formData.get("content"),
    published: formData.get("published") === "on",
  });

  if (!parsed.success) {
    return { errors: parsed.error.flatten().fieldErrors };
  }

  await prisma.post.create({
    data: { ...parsed.data, authorId: "current-user-id" },
  });

  redirect("/posts");
}

API Routeの创建

外部联动用のAPI Routeも同時に创建可以。

> /api/posts のRoute Handler创建。
> GET（列表・搜索・分页）と POST（创建）。
> 认证チェックも含めて。

// src/app/api/posts/route.ts
import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { auth } from "@/lib/auth";

export async function GET(request: NextRequest) {
  const { searchParams } = request.nextUrl;
  const page = Number(searchParams.get("page")) || 1;
  const q = searchParams.get("q") || "";
  const limit = 20;

  const where = q
    ? { title: { contains: q, mode: "insensitive" as const } }
    : {};

  const [posts, total] = await Promise.all([
    prisma.post.findMany({
      where,
      take: limit,
      skip: (page - 1) * limit,
      orderBy: { createdAt: "desc" },
    }),
    prisma.post.count({ where }),
  ]);

  return NextResponse.json({
    data: posts,
    meta: { page, limit, total },
  });
}

export async function POST(request: NextRequest) {
  const session = await auth();
  if (!session) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const body = await request.json();
  const post = await prisma.post.create({
    data: { ...body, authorId: session.user.id },
  });

  return NextResponse.json({ data: post }, { status: 201 });
}

中间件の配置

认证路由を中间件で制御します。

> 认证が必要なルートを中间件で保護して。
> /dashboard, /posts/new, /api/posts(POST) は认证必須。

DB联动的详细信息请参阅DB迁移自动化を、React组件の设计はReact开发を爆速にする方法。日々の开发効率を上げるコツは生産性を3倍にする10のTips也请一并查看。

总结

与 Claude CodeNext.jsの組み合わせは、全栈开发を劇的に加速します。Server Components、Server Actions、API Routeを一貫して生成できるため、前端から后端までシームレスに开发を進められます。

Next.js的详细信息请参阅Next.js官方文档、让 Claude CodeついてはAnthropic官方文档。