Instructions

Please fork and clone the following repo:

https://github.com/WesternSydneyUniversity/comp3036-api-nextjs/

Make sure that all tests pass! Once you have a solution, or your are struggling, please see below:

Solution

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 { createTask, getTasks } from "@/lib/tasks";
import { NextRequest, NextResponse } from "next/server";

export async function GET() {
  const tasks = getTasks();
  return NextResponse.json(tasks);
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  const newTask = createTask(body.description, body.completed);
  return NextResponse.json(newTask, { status: 201 });
}

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 and paste the solution below, try to implement the rest of the handles yourself! But if you are eager to see how the solution looks:

// file: /src/app/tasks/[id]/route.ts
import { deleteTask, getTask, updateTask } from "@/lib/tasks";
import { NextRequest, NextResponse } from "next/server";

export async function GET(
  request: NextRequest,
  { params }: { params: { id: string } }
) {
  const id = parseInt(params.id);
  const task = getTask(id);
  if (task) {
    return NextResponse.json(task);
  }
  return NextResponse.json({ message: "Task not found" }, { status: 404 });
}

export async function PUT(
  request: NextRequest,
  { params }: { params: { id: string } }
) {
  const id = parseInt(params.id);
  const body = await request.json();
  const updatedTask = updateTask(id, body.description, body.completed);
  if (updatedTask) {
    return NextResponse.json(updatedTask);
  }
  return NextResponse.json({ message: "Task not found" }, { status: 404 });
}

export async function DELETE(
  request: NextRequest,
  { params }: { params: { id: string } }
) {
  const id = parseInt(params.id);
  const deleted = deleteTask(id);
  if (deleted) {
    return NextResponse.json({ message: "Task deleted" });
  }
  return NextResponse.json({ message: "Task not found" }, { status: 404 });
}