Desarrollo full-stack con Next.js y Claude Code

Full-Stack Development with Next.js x Claude Code

Next.js App Router is a framework that lets you develop frontend and backend in a unified way. By combining it with Claude Code, you can build pages, API routes, and database integrations all at once.

Initial Project Setup

> Create a Next.js 14 + TypeScript + Tailwind CSS + Prisma project.
> Use the App Router with the following structure:
> - src/app: pages and layouts
> - src/components: shared components
> - src/lib: utilities and DB connections
> - prisma: schema and migrations

Using Server Components

Generate patterns that fetch data using Server Components.

> Create a blog post listing page as a Server Component.
> Fetch data from Prisma. Support pagination.

// 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">All Posts</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: "All Posts",
  description: "Browse all posts",
};

Using Server Actions

Implement form handling with Server Actions.

> Implement a post creation form using Server Actions.
> Use zod for validation and include error handling.

// 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, "Title is required").max(200),
  content: z.string().min(10, "Content must be at least 10 characters"),
  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");
}

Creating API Routes

You can also create API Routes for external integrations at the same time.

> Create Route Handlers for /api/posts.
> GET (list, search, pagination) and POST (create).
> Include authentication checks.

// 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 });
}

Configuring Middleware

Control authentication routing with middleware.

> Protect routes that require authentication using middleware.
> /dashboard, /posts/new, and /api/posts (POST) require authentication.

For DB integration details, see DB Migration Automation. For React component design, see How to Supercharge React Development. For tips on boosting daily development efficiency, also check out 10 Tips to Triple Your Productivity.

Summary

The combination of Claude Code and Next.js dramatically accelerates full-stack development. Since it can consistently generate Server Components, Server Actions, and API Routes, you can develop seamlessly from frontend to backend.

For Next.js details, refer to the official Next.js documentation. For Claude Code, see the official Anthropic documentation.