How to create API endpoints in Next.js?

In this tutorial, you will learn how to create API endpoints in Next.js.

Next.js allows you to create API endpoints easily using Route Handlers. Each file inside /app/api/ becomes an API endpoint.

Create the API endpoints.

Step 1: Create a Folder

Suppose you will create a users folder for endpoints.

app/
└── api/
    └── users/
         ├── route.js // GET, POST
         └── [id]/
              └── route.js // PUT, DELETE

Step 2: Create a GET Request

Access URL: GET /api/users

Example:

import { NextResponse } from 'next/server';

export async function GET() {
const users = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Tom' }
];

return NextResponse.json(users);
}

Step 3: POST Request in Next.js

Now, you will create a new user through this.

Access URL: POST /api/users

Example:

import { NextResponse } from 'next/server';

export async function POST(request) {
const body = await request.json();

const newUser = {
id: 3,
name: 'Mark'
};

return NextResponse.json(
{ message: 'User created', user: newUser },
{ status: 201 }
);
}

Step 4: PUT Request in Next.js

PUT request is used to update existing records.

Access URL: PUT /api/users/1

Folder structure:

app/api/users/[id]/route.js

Example:

import { NextResponse } from 'next/server';

export async function PUT(request, { params }) {
const { id } = params;
const body = await request.json();

return NextResponse.json({
message: `User ${id} updated`,
updatedData: body
});
}

Step 5: DELETE Request in Next.js

The delete request is used to delete the records.

Folder structure:

app/api/users/[id]/route.js

Example:

import { NextResponse } from 'next/server';

export async function DELETE(request, { params }) {
const { id } = params;

return NextResponse.json({
message: `User ${id} deleted`
});
}

How to create API endpoints in Next.js? – Interview Questions

How to create API endpoints in Next.js? – Objective Questions (MCQs)

Related How to create API endpoints in Next.js? Topics