Best GitHub parte 3
Tags: githubhack23, nextjs, typescript, spanish
Published: 2023-05-03 01:41:37

Hola de nuevo 👋, en este post vamos a crear el backend en **Next JS**.

Vamos a empezar accediendo a la carpeta **api** que se encuentra dentro de la carpeta **pages** que se encuentra dentro de la carpeta **src**.

Una vez ahí, nos encontraremos con un archivo **hello.ts**, lo que haremos será renombrarlo a **places.ts** y hacer que quede de esta forma:

```
import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(req: NextApiRequest,res: NextApiResponse ) {
  
}
```

Ahora en la carpeta **src** vamos a proceder a crear una carpeta llamada **utils**, que es la que va a contener todas las utilidades que vamos a utilizar en el frontend como en el backend.

Dentro de la carpeta **utils** vamos a crear un archivo **messages.ts**, que va a tener los mensajes de respuesta que se van a usar en más de un lugar, así evitaremos reescribir código.

Dentro del archivo **messages.ts** vamos a agregar el siguiente código:

```
const messages = {
  error: { message: "There was an error, please try again later" },
  notFound: { message: "Not found" },
};

export default messages;
```

La constante **messages** almacena un objeto con dos objetos, el primero lo vamos a utilizar como un mensaje de error general y el segundo como un mensaje de error cuando traten de acceder a alguno de nuestros endpoints con un método distinto al que establezcamos.

Una vez aclarado, accederemos a nuesto archivo **places.ts** y dentro de la función **handler** agregaremos el siguiente código:

```
if (req.method !== "GET") {
  return res.status(404).json(messages.notFound);
}
```
El **if** sirve para que si alguien trata de acceder a la ruta **/api/places** con un método distinto al método **GET** le responda al usuario con un código de estado **404** y el mensaje **{ message: "Not found" }** en formato JSON.

Así que nuestro archivo **places.ts** se tendría que ver de esta forma:

```
import type { NextApiRequest, NextApiResponse } from "next";

import messages from "@/utils/messages";

export default async function handler(req: NextApiRequest,res: NextApiResponse) {
  if (req.method !== "GET") {
    return res.status(404).json(messages.notFound);
  }
}
```

Ahora crearemos en la carpeta **utils** un archivo **usersCall.ts**, que usaremos para traer con **prisma** todos los usuarios que tenemos agregados en nuestra base de datos de **MongoDB Atlas**.

Una vez creado agregaremos el siguiente código:

```
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

const usersCall = async () => {
  const users = await prisma.user.findMany();
  const usersOrdered = users.sort((a, b) => b.total - a.total);
  return usersOrdered;
};

export default usersCall;
```

En la constante **users** estoy guardando todos los usuarios que he mandado a llamar con **prisma** con la función **findMany**, y en la constante **usersOrdered** estoy guardando todos los usuarios ordenados por el total de mayor a menor con el método **sort** de JavaScript.

Ahora en nuestro archivo **places.ts** después del **if** agregaremos el siguiente código:

```
try {
    const users = await usersCall();

    if (users.length === 0) {
      return res.status(400).json(messages.error);
    }

    res.status(200).json(users);
} catch (error) {
    res.status(400).json(messages.error);
}
```

En la constante **users** estoy guardando los usuarios ordenados de mayor a menor por el total desde la función **usersCall**, en el **if** estoy comprobando que si los usuarios son cero, me retorne un código de estado **400** y un mensaje **{ message: "There was an error, please try again later" }** en formato JSON.

Y si no, me retorne un código de estado **200**, y todos los usuarios ordenados de mayor a menor en formato JSON, pero si todo eso falla, ya sea porque la base de datos se encuentre caída o alguna causa no provista, me retorne con un catch la respuesta de código de estado **400** y el mensaje **{ message: "There was an error, please try again later" }** en formato JSON.

Así que tu archivo **places.ts** tendría que verse de esta forma:

```
import type { NextApiRequest, NextApiResponse } from "next";

import messages from "@/utils/messages";
import usersCall from "@/utils/usersCall";

export default async function handler(req: NextApiRequest,res: NextApiResponse) {
  if (req.method !== "GET") {
    return res.status(404).json(messages.notFound);
  }

  try {
    const users = await usersCall();

    if (users.length === 0) {
      return res.status(400).json(messages.error);
    }

    res.status(200).json(users);
  } catch (error) {
    res.status(400).json(messages.error);
  }
}
```
Eso es todo por este post, en el siguiente post crearemos una ruta más para poder cambiar los lugares consultando el api pública de **GitHub**.