First, make sure that your express application is not running by pressing “CTRL+C” in the terminal where you launched the express application.

Now, please open your project and add a new file route.js to the following directory src/app/api/tasks/route.ts. As we mentioned previously, Next is using “file-based routing” with the root of your application stored in the src/app folder. Adding a new route.ts folder the the giben location, you have essentially added a new route at http://localhost:3000/api/tasks.

Listing Tasks

We will now add a new route handler into the new route.ts file. Please us the following code:

import { NextResponse, type NextRequest } from "next/server";

// In-memory data store for tasks
const tasks = [
  { id: 1, description: "Complete the project report", completed: false },
  { id: 2, description: "Clean the house", completed: true }
];

function listTasks(req: NextRequest, res: NextResponse) {
  return NextResponse.json(tasks);
}

// export individual handlers as REST commands
export { listTasks as GET };

The main difference with express.js is that we export individual handlers as the REST commands they represent. Please run your next.js project with:

pnpm dev

Then, in a separate terminal run the following command:

curl http://localhost:3000/api/tasks

Modifying Tasks

Before you just copy, paste the solution below. Try to implement the rest of the handles yourself! But if you are eager how the solution looks:

import { NextResponse, type NextRequest } from "next/server";

// In-memory data store for tasks
const tasks = [
  { id: 1, description: "Complete the project report", completed: false },
  { id: 2, description: "Clean the house", completed: true }
];

function listTasks(req: NextRequest, res: NextResponse) {
  return NextResponse.json(tasks);
}

async function addTask(req: NextRequest, res: NextResponse) {
  const { description, completed = false } = await req.json();
  const newTask = {
    id: tasks.length + 1,
    description,
    completed
  };
  tasks.push(newTask);
  return NextResponse.json(newTask, { status: 201 });
}

async function updateTask(req: NextRequest) {
  const { id, description, completed } = await req.json();
  const taskIndex = tasks.findIndex((task) => task.id === id);

  if (taskIndex !== -1) {
    tasks[taskIndex] = { id, description, completed };
    return NextResponse.json(tasks[taskIndex]);
  }

  return NextResponse.json({ message: "Task not found" }, { status: 404 });
}

async function deleteTask(req: NextRequest) {
  const { id } = await req.json();
  const taskIndex = tasks.findIndex((task) => task.id === id);

  if (taskIndex !== -1) {
    tasks.splice(taskIndex, 1);
    return NextResponse.json({ message: "Task deleted" });
  }

  return NextResponse.json({ message: "Task not found" }, { status: 404 });
}

// export individual handlers as REST commands
export {
  deleteTask as DELETE,
  listTasks as GET,
  addTask as POST,
  updateTask as PUT
};

👾 Exercise

Apply the same test procedures as in the previous exercise to test your API functionality. Make sure to use /api/tasks route not just /tasks.