When you first hear "full CRUD app," it sounds heavier than it actually is. Create, Read, Update, Delete. That's it. But if you're new to building full-stack apps in Next.js, it can feel confusing. Where does the backend go? How does the frontend talk to it? Why is everything inside the same project? Let's simplify the process and build a clear mental model before touching too much code.

Step 1: Understand What You're Building

Before opening your editor, define what your app does. We'll build a simple Projects app: • Create a project • View all projects • Update a project • Delete a project That's your CRUD. Don't think about components yet. Just focus on what the user can do.

Step 2: Set Up a Basic Next.js App

Start with a fresh project:

npx create-next-app@latest my-crud-app
cd my-crud-app
npm run dev

Make sure you're using the App Router, which is the default in modern Next.js. At this point, you already have both frontend and backend capabilities in one place. That's the part that usually surprises beginners.

Step 3: Create Your First API Route

In Next.js, backend logic lives inside the app/api folder. Create this file: app/api/projects/route.ts Add a simple GET endpoint:

import { NextResponse } from "next/server";

let projects: any[] = [];

export async function GET() {
  return NextResponse.json(projects);
}

This is your backend. No Express setup. No server config. It just works.

Step 4: Add Create Functionality

Now let users add data. Update the same file:

export async function POST(req: Request) {
  const body = await req.json();

  const newProject = {
      id: crypto.randomUUID(),
      name: body.name,
  };

  projects.push(newProject);
  return NextResponse.json(newProject);
}

You now support Create and Read. Already halfway through CRUD.

Step 5: Show Data on the Frontend

Now let's display projects. Create a page: app/projects/page.tsx

async function getProjects() {
  const res = await fetch("http://localhost:3000/api/projects", {
    cache: "no-store",
  });

  return res.json();
}

export default async function ProjectsPage() {
  const projects = await getProjects();
  return (
    <div>
      <h1>Projects</h1>
      {projects.map((p: any) => (
        <p key={p.id}>{p.name}</p>
      ))}
    </div>
  );
}

This is a server component, so data is fetched before the page loads. No loading state needed for the first render.

Step 6: Add a Simple Form

Now let users create projects from the UI.

"use client";

import { useState } from "react";

export function ProjectForm() {
  const [loading, setLoading] = useState(false);
  
  async function handleSubmit(formData: FormData) {
    setLoading(true);
    await fetch("/api/projects", {
      method: "POST",
      body: JSON.stringify({
        name: formData.get("name"),
      }),
    });
    setLoading(false);
  }

  return (
    <form action={handleSubmit}>
      <input name="name" placeholder="Project name" required />
      <button disabled={loading}>
        {loading ? "Creating..." : "Create"}
      </button>
    </form>
  );
}

This is your Create UI. Simple, but real.

Step 7: Add Update and Delete

Now complete the CRUD. Create another API file: app/api/projects/[id]/route.ts

import { NextResponse } from "next/server";

export async function PUT(
  req: Request,
  { params }: { params: { id: string } }
  ) 

{
  const body = await req.json();
  projects = projects.map((p) =>
    p.id === params.id ? { ...p, name: body.name } : p
  );
  return NextResponse.json({ success: true });
}

export async function DELETE(
  _: Request,
  { params }: { params: { id: string } }
) {
  projects = projects.filter((p) => p.id !== params.id);
  return NextResponse.json({ success: true });
}

Now you have full CRUD support.

Step 8: Keep UI Updated

After creating or deleting, your UI needs fresh data. The simplest way in Next.js is revalidation.

import { revalidatePath } from "next/cache";

revalidatePath("/projects");

Call this after mutations to refresh the page data. Without this, your UI might feel "stuck," which is a common beginner confusion. Common Beginner Mistakes You'll probably hit these once, and that's fine: • Forgetting "use client" for interactive components • Mixing server and client logic incorrectly • Not refreshing data after mutations • Overcomplicating state too early If something feels weird, it usually means responsibilities are mixed.

Final Thoughts

Building a full CRUD app in Next.js is no longer a complicated, multi-tool setup. You don't need separate frontend and backend projects. You don't need heavy configuration. What you do need is a clear process: Start with the user actions. Create API routes. Connect them to simple UI. Then refine. Once this clicks, full-stack development feels much more approachable. And honestly, a lot more fun than it used to be.

How to Build a Full CRUD App in Next.js (Frontend + Backend)