Cómo Crear un Endpoint en una API con Next.js 15 y TypeScript

Next.js 15 simplifica la creación de APIs con su arquitectura moderna. En esta guía, aprenderás a crear un endpoint utilizando TypeScript para mejorar la seguridad y la mantenibilidad de tu código.

¿Qué es un endpoint?

Un endpoint es una URL específica que permite a los clientes interactuar con tu API. Los endpoints suelen estar asociados a operaciones como obtener datos, crear recursos o realizar búsquedas.

Pasos para crear un endpoint

1. Configura TypeScript en tu proyecto

Si aún no tienes TypeScript configurado en tu proyecto de Next.js, instálalo con:

npm install --save-dev typescript @types/react @types/node

Luego, inicia el servidor de desarrollo para generar un archivo tsconfig.json automáticamente: ñ

npm run dev

2. Crea un archivo para tu endpoint

En Next.js, los endpoints se definen dentro de la carpeta app/api. Cada archivo dentro de esta carpeta representa un endpoint. Por ejemplo, crea un archivo llamado productos/route.ts:

// app/api/productos/route.ts
import { NextRequest, NextResponse } from 'next/server';

type Producto = {
    id: number;
    nombre: string;
    precio: number;
};

const productos: Producto[] = [
    { id: 1, nombre: 'Camiseta', precio: 19.99 },
    { id: 2, nombre: 'Pantalón', precio: 39.99 },
];

export async function GET() {
    return NextResponse.json({
        message: 'Lista de productos',
        productos,
    });
}

export async function POST(request: NextRequest) {
    try {
        const body = await request.json();
        const nuevoProducto: Producto = {
            id: Date.now(),
            nombre: body.nombre,
            precio: body.precio,
        };

        productos.push(nuevoProducto);

        return NextResponse.json({
            message: 'Producto creado',
            producto: nuevoProducto,
        }, { status: 201 });
    } catch (error) {
        return NextResponse.json({ error: 'Error al procesar la solicitud' }, { status: 400 });
    }
}

3. Probar el endpoint

Ejecuta tu proyecto Next.js:

npm run dev

Accede a los siguientes endpoints:

• GET: http://localhost:3000/api/productos para obtener la lista de productos.
• POST: Usa herramientas como Postman o cURL para enviar datos en formato JSON a http://localhost:3000/api/productos.

Ejemplo de solicitud POST

{
    "nombre": "Gorra",
    "precio": 14.99
}

Respuesta esperada

{
    "message": "Producto creado",
    "producto": {
        "id": 1674059871234,
        "nombre": "Gorra",
        "precio": 14.99
    }
}

4. Validar datos con TypeScript (opcional)

Puedes mejorar la validación de los datos utilizando bibliotecas como zod. Instala zod con:

npm install zod

Actualiza el código del endpoint para validar los datos:

import { z } from 'zod';

const productoSchema = z.object({
    nombre: z.string().min(1, 'El nombre es obligatorio'),
    precio: z.number().positive('El precio debe ser un número positivo'),
});

export async function POST(request: NextRequest) {
    try {
        const body = await request.json();
        const datos = productoSchema.parse(body);

        const nuevoProducto = {
            id: Date.now(),
            ...datos,
        };

        productos.push(nuevoProducto);

        return NextResponse.json({
            message: 'Producto creado',
            producto: nuevoProducto,
        }, { status: 201 });
    } catch (error) {
        return NextResponse.json({
            error: error instanceof z.ZodError ? error.errors : 'Error inesperado',
        }, { status: 400 });
    }
}

Conclusión

Con Next.js 15 y TypeScript, puedes construir endpoints seguros y eficientes en cuestión de minutos. Esta estructura te permite crear APIs modernas y escalables para tus proyectos. ¡Empieza hoy y lleva tus aplicaciones al siguiente nivel!