Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Next.js

Curso de Next.js

Jonathan Alvarez

Jonathan Alvarez

¿Cómo crear API con NextJS?

10/27
Recursos

Aportes 51

Preguntas 17

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

La url del repo: https://github.com/jonalvarezz/platzi-nextjs

Hola, para los que decidieron continuar trabajando con el proyecto que ya tenían y quieren usan TypeScript, deben de instalar las siguientes dependencias para poder usar TypeScript
.
npm install --save-dev typescript @types/react @types/node
.
.
Después pueden correr npm run dev y NextJS les generará automáticamente los archivos de configuración de TypeScript, los cuales son (con su contenido):
.
tsconfig.json:
{
“compilerOptions”: {
“target”: “es5”,
“lib”: [
“dom”,
“dom.iterable”,
“esnext”
],
“allowJs”: true,
“skipLibCheck”: true,
“strict”: false,
“forceConsistentCasingInFileNames”: true,
“noEmit”: true,
“esModuleInterop”: true,
“module”: “esnext”,
“moduleResolution”: “node”,
“resolveJsonModule”: true,
“isolatedModules”: true,
“jsx”: “preserve”
},
“include”: [
“next-env.d.ts”,
"/*.ts",
"
/*.tsx"
],
“exclude”: [
“node_modules”
]
}

.
.
next-env.d.ts:
/// <reference types=“next” />
/// <reference types=“next/types/global” />
.
.
.
Ambos creados en el root del proyecto

Entiendo que sea opcional, pero cuál es el punto de añadir TypeScript en un curso de Next JS? Solo le agrega dificultad al proyecto y al segumiento del mismo curso

sin typescript

import allData from './data'

class Database {
  constructor() {}

  getAll() {
    return new Promise(async (resolve, reject) => {
      try {
        const asArray = Object.values(allData)
        console.log('allDATA:', asArray)
        await randomDelay()
        resolve(asArray)
      } catch (error) {
        reject(error)
      }
    })
  }

  getById(id) {
    return new Promise(async (resolve, reject) => {
      try {
        const avocade = Object.values(allData).find(
          (avocade) => avocade.id === id
        )
        await randomDelay()
        resolve(avocade)
      } catch (error) {
        reject(error)
      }
    })
  }
}

const randomDelay = () =>
  new Promise((resolve) => {
    const max = 350
    const min = 100
    const delay = Math.floor(Math.random() * (max - min + 1)) + min

    setTimeout(resolve, delay)
  })

export default Database
const data = {
  '2zd33b8c': {
    name: 'Maluma Hass Avocado',
    id: '2zd33b8c',
    sku: 'NUR72KCM',
    price: 1.15,
    image: '/images/maluma.jpg',
    attributes: {
      description:
        'A relatively new cultivar, it was, the pretty boy baby, discovered in South Africa in the early 1990s by Mr. A.G. (Dries) Joubert. Maluma Babyy. It is a chance seedling of unknown parentage',
      shape: 'Oval',
      hardiness: '1 °C',
      taste: 'Catchy, is an avocado'
    }
  },
  '6trfgkkj': {
    name: 'Fuerte Avocado',
    id: '6trfgkkj',
    sku: 'AX4M8SJV',
    price: 1.21,
    image: '/images/fuerte.jpg',
    attributes: {
      description:
        'The Fuerte avocado is the second largest commercial variety behind Hass. It is a long time California commercial variety valued for its winter season ripening and its B-Type blossom type which most growers plant adjacent to the Hass for a more consistent production cycle. This avocado tends to produce heavily in alternate years.',
      shape: 'Pear',
      hardiness: '-1 °C',
      taste: 'Magnificent, is a strong avocado'
    }
  },
  '7bcr49em': {
    name: 'Gwen Hass Avocado',
    id: '7bcr49em',
    sku: 'HYA78F6J',
    price: 1.25,
    image: '/images/gwen.jpg',
    attributes: {
      description:
        "A seedling bred from 'Hass' x 'Thille' in 1982, 'Gwen' is higher yielding and more dwarfing than 'Hass' in California. The fruit has an oval shape, slightly smaller than 'Hass' (100200 g or 3.57.1 oz), with a rich, nutty flavor. The skin texture is more finely pebbled than 'Hass', and is dull green when ripe. It is frost-hardy down to −1 °C (30 °F)",
      shape: 'Plump',
      hardiness: '−1 °C',
      taste: 'Superb, is an avocado'
    }
  },
  '098323ks': {
    name: 'Bacon Avocado',
    id: '098323ks',
    sku: 'BXD100BLK',
    price: 1.51,
    image: '/images/bacon.jpg',
    attributes: {
      description:
        'Developed by a farmer, James Bacon, in 1954, Bacon has medium-sized fruit with smooth, green skin with yellow-green, light-tasting flesh. When ripe, the skin remains green, but darkens slightly, and fruit yields to gentle pressure. It is cold-hardy down to −5 °C (23 °F)',
      shape: 'Oval',
      hardiness: '−5 °C',
      taste: 'Creamy, is an avocado'
    }
  },
  b8uthe2y: {
    name: 'Hass Avocado',
    id: 'b8uthe2y',
    sku: 'RMRCZN7E',
    price: 1.39,
    image: '/images/hass.jpg',
    attributes: {
      description:
        "The 'Hass' is the most common cultivar of avocado. It produces fruit year-round and accounts for 80% of cultivated avocados in the world.[21][55] All 'Hass' trees are descended from a single 'mother tree' raised by a mail carrier named Rudolph Hass, of La Habra Heights, California.[20][55] Hass patented the productive tree in 1935. The 'mother tree', of uncertain subspecies, died of root rot and was cut down in September 2002.[21][55][56] 'Hass' trees have medium-sized (150250 g or 5.38.8 oz), ovate fruit with a black, pebbled skin. The flesh has a nutty, rich flavor with 19% oil. A hybrid Guatemalan type can withstand temperatures to −1 °C (30 °F)",
      shape: 'Oval',
      hardiness: '−1 °C',
      taste: 'Gorgeous, is an avocado'
    }
  },
  ewxsd6xb: {
    name: 'Lamb Hass Avocado',
    id: 'ewxsd6xb',
    sku: 'N55229ZA',
    price: 1.34,
    image: '/images/lamb.jpg',
    attributes: {
      description:
        'The Lamb Hass avocado is a cross between a Hass and Gwen avocado. The fruits are larger in size and later maturing than Hass. It is gaining in popularity as a commercial and backyard variety due to its exceptional flavor and easy peeling qualities. The tree has an upright, compact habit.',
      shape: 'Obovate',
      hardiness: '-2 °C',
      taste: 'Great, is an avocado'
    }
  },
  fpr72m9k: {
    name: 'Pinkerton Avocado',
    id: 'fpr72m9k',
    sku: 'B4HZ42TM',
    price: 1.27,
    image: '/images/pinkerton.jpg',
    attributes: {
      description:
        "First grown on the Pinkerton Ranch in Saticoy, California, in the early 1970s, 'Pinkerton' is a seedling of 'Hass' x 'Rincon'. The large fruit has a small seed, and its green skin deepens in color as it ripens. The thick flesh has a smooth, creamy texture, pale green color, good flavor, and high oil content. It shows some cold tolerance, to −1 °C (30 °F) and bears consistently heavy crops. A hybrid Guatemalan type, it has excellent peeling characteristics",
      shape: 'Long pear',
      hardiness: '−1 °C',
      taste: 'Marvelous, is an avocado'
    }
  },
  t9dv25gs: {
    name: 'Reed Avocado',
    id: 't9dv25gs',
    sku: 'ZY3T9XXC',
    price: 1.18,
    image: '/images/reed.jpg',
    attributes: {
      description:
        'Developed from a chance seedling found in 1948 by James S. Reed in California, this cultivar has large, round, green fruit with a smooth texture and dark, thick, glossy skin. Smooth and delicate, the flesh has a slightly nutty flavor. The skin ripens green. A Guatemalan type, it is hardy to −1 °C (30 °F). Tree size is about 5 by 4 m (16.4 by 13.1 ft)',
      shape: 'Round',
      hardiness: '−1 °C',
      taste: 'Exquisite, is an avocado'
    }
  },
  t345w48y: {
    name: 'Zutano Avocado',
    id: 't345w48y',
    sku: 'MW79ZZ6Y',
    price: 1.25,
    image: '/images/zutano.jpg',
    attributes: {
      description:
        'The Zutano avocado is a cold hardy, consistent producing avocado variety. It resembles the Fuerte in appearance but is less flavorful but more cold hardy. The green fruits are obovate in shape with waxy bumps on the skin. The flesh has a low oil but high water content which causes it to have a more fibrous texture.',
      shape: 'Pear',
      hardiness: '-5 °C',
      taste: 'Splendid, is an avocado'
    }
  }
}

export default data

También es posible enviar la respuesta en formato json de la siguiente forma:

res.status(200).json(allEntries);

De esta manera es posible especificar el status y el content-type de forma más sencilla. Pueden ver la documentación oficial aquí: Response Helpers

Si alguien presenta problemas con el import de ‘@database’, recuerde agregar esto en su configuración de TypeScript:

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@database": ["database/db.ts"]
    },
}

O copie el archivo tsconfig.json del repo a su código.

no entiendo por que pasa todo el proyecto a typescript cuando no tiene sentido. La gente que ve el curso esta queriendo apreder next.js, para el cual no es necesario typescript. De mi parte, yo no se typescript y por ahora no estoy interesado, primero quiero aprender next.js. Voy a tener que dejar el curso a la mitad por que cambian las cosas a la mitad. muy malo

Hola ✌🏼 ¿Quieres seguir con el curso sin usar TypeScript?
1.Crea una carpeta en la raiz de tu proyecto llamada database
2.Dentro de ella crea el archivo data.js y pega el siguiente código.

const data = {
  '2zd33b8c': {
    name: 'Maluma Hass Avocado',
    id: '2zd33b8c',
    sku: 'NUR72KCM',
    price: 1.15,
    image: '/images/maluma.jpg',
    attributes: {
      description:
        'A relatively new cultivar, it was, the pretty boy baby, discovered in South Africa in the early 1990s by Mr. A.G. (Dries) Joubert. Maluma Babyy. It is a chance seedling of unknown parentage',
      shape: 'Oval',
      hardiness: '1 °C',
      taste: 'Catchy, is an avocado',
    },
  },
  '6trfgkkj': {
    name: 'Fuerte Avocado',
    id: '6trfgkkj',
    sku: 'AX4M8SJV',
    price: 1.21,
    image: '/images/fuerte.jpg',
    attributes: {
      description:
        'The Fuerte avocado is the second largest commercial variety behind Hass. It is a long time California commercial variety valued for its winter season ripening and its B-Type blossom type which most growers plant adjacent to the Hass for a more consistent production cycle. This avocado tends to produce heavily in alternate years.',
      shape: 'Pear',
      hardiness: '-1 °C',
      taste: 'Magnificent, is a strong avocado',
    },
  },
  '7bcr49em': {
    name: 'Gwen Hass Avocado',
    id: '7bcr49em',
    sku: 'HYA78F6J',
    price: 1.25,
    image: '/images/gwen.jpg',
    attributes: {
      description:
        "A seedling bred from 'Hass' x 'Thille' in 1982, 'Gwen' is higher yielding and more dwarfing than 'Hass' in California. The fruit has an oval shape, slightly smaller than 'Hass' (100–200 g or 3.5–7.1 oz), with a rich, nutty flavor. The skin texture is more finely pebbled than 'Hass', and is dull green when ripe. It is frost-hardy down to −1 °C (30 °F)",
      shape: 'Plump',
      hardiness: '−1 °C',
      taste: 'Superb, is an avocado',
    },
  },
  '098323ks': {
    name: 'Bacon Avocado',
    id: '098323ks',
    sku: 'BXD100BLK',
    price: 1.51,
    image: '/images/bacon.jpg',
    attributes: {
      description:
        'Developed by a farmer, James Bacon, in 1954, Bacon has medium-sized fruit with smooth, green skin with yellow-green, light-tasting flesh. When ripe, the skin remains green, but darkens slightly, and fruit yields to gentle pressure. It is cold-hardy down to −5 °C (23 °F)',
      shape: 'Oval',
      hardiness: '−5 °C',
      taste: 'Creamy, is an avocado',
    },
  },
  b8uthe2y: {
    name: 'Hass Avocado',
    id: 'b8uthe2y',
    sku: 'RMRCZN7E',
    price: 1.39,
    image: '/images/hass.jpg',
    attributes: {
      description:
        "The 'Hass' is the most common cultivar of avocado. It produces fruit year-round and accounts for 80% of cultivated avocados in the world.[21][55] All 'Hass' trees are descended from a single 'mother tree' raised by a mail carrier named Rudolph Hass, of La Habra Heights, California.[20][55] Hass patented the productive tree in 1935. The 'mother tree', of uncertain subspecies, died of root rot and was cut down in September 2002.[21][55][56] 'Hass' trees have medium-sized (150–250 g or 5.3–8.8 oz), ovate fruit with a black, pebbled skin. The flesh has a nutty, rich flavor with 19% oil. A hybrid Guatemalan type can withstand temperatures to −1 °C (30 °F)",
      shape: 'Oval',
      hardiness: '−1 °C',
      taste: 'Gorgeous, is an avocado',
    },
  },
  ewxsd6xb: {
    name: 'Lamb Hass Avocado',
    id: 'ewxsd6xb',
    sku: 'N55229ZA',
    price: 1.34,
    image: '/images/lamb.jpg',
    attributes: {
      description:
        'The Lamb Hass avocado is a cross between a Hass and Gwen avocado. The fruits are larger in size and later maturing than Hass. It is gaining in popularity as a commercial and backyard variety due to its exceptional flavor and easy peeling qualities. The tree has an upright, compact habit.',
      shape: 'Obovate',
      hardiness: '-2 °C',
      taste: 'Great, is an avocado',
    },
  },
  fpr72m9k: {
    name: 'Pinkerton Avocado',
    id: 'fpr72m9k',
    sku: 'B4HZ42TM',
    price: 1.27,
    image: '/images/pinkerton.jpg',
    attributes: {
      description:
        "First grown on the Pinkerton Ranch in Saticoy, California, in the early 1970s, 'Pinkerton' is a seedling of 'Hass' x 'Rincon'. The large fruit has a small seed, and its green skin deepens in color as it ripens. The thick flesh has a smooth, creamy texture, pale green color, good flavor, and high oil content. It shows some cold tolerance, to −1 °C (30 °F) and bears consistently heavy crops. A hybrid Guatemalan type, it has excellent peeling characteristics",
      shape: 'Long pear',
      hardiness: '−1 °C',
      taste: 'Marvelous, is an avocado',
    },
  },
  t9dv25gs: {
    name: 'Reed Avocado',
    id: 't9dv25gs',
    sku: 'ZY3T9XXC',
    price: 1.18,
    image: '/images/reed.jpg',
    attributes: {
      description:
        'Developed from a chance seedling found in 1948 by James S. Reed in California, this cultivar has large, round, green fruit with a smooth texture and dark, thick, glossy skin. Smooth and delicate, the flesh has a slightly nutty flavor. The skin ripens green. A Guatemalan type, it is hardy to −1 °C (30 °F). Tree size is about 5 by 4 m (16.4 by 13.1 ft)',
      shape: 'Round',
      hardiness: '−1 °C',
      taste: 'Exquisite, is an avocado',
    },
  },
  t345w48y: {
    name: 'Zutano Avocado',
    id: 't345w48y',
    sku: 'MW79ZZ6Y',
    price: 1.25,
    image: '/images/zutano.jpg',
    attributes: {
      description:
        'The Zutano avocado is a cold hardy, consistent producing avocado variety. It resembles the Fuerte in appearance but is less flavorful but more cold hardy. The green fruits are obovate in shape with waxy bumps on the skin. The flesh has a low oil but high water content which causes it to have a more fibrous texture.',
      shape: 'Pear',
      hardiness: '-5 °C',
      taste: 'Splendid, is an avocado',
    },
  },
}

export default data

3.Dentro de la misma carpeta database crea el archivo db.js y pega el siguiente código.

// Oh you curious...
// This is not a real database,
// But let's imagine it is one :)
import data from './data';

// Estoy utilizando un objeto llamado Database para seguir simulando un ambiente llamando la base de datos.
const Database = {};

Database.getAll = async () => {
  const asArray = Object.values(data);
  await randomDelay();
  return asArray;
};

Database.getById = async (id) => {
  const entry = data[id];
  await randomDelay();
  return entry;
};

// Modifique el tiempo del delay para simular el tiempo de espera
// Tardara entre 1 a 4 segundos
const randomDelay = () => {
  return new Promise((resolve) => {
    const delay = Math.floor(Math.random() * 4000) + 1000;
    setTimeout(resolve, delay);
  });
};

export default Database;

4.Sigue adelante con la clase solo evita los types y estarás bien suerte

Pasos para correr el código de github

  1. Correr en tu consola de comando, el siguiente comando
git clone https://github.com/jonalvarezz/platzi-nextjs.git
  1. Correr el comando cd
cd platzi-nextjs
  1. Instalar las dependecias
npm i

o en caso de usar yarn

yarn add
  1. Por último correr el proyecto
npm run dev

Aunque depronto está salido del tema, no quería dejarlo pasar. Es muy útil y ayuda a limpiar mucho los imports usando el fichero “jsconfig.json”.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "assets/*":["assets/*"],
      "components/*":["components/*"],
      "config/*":["config/*"],
      "constants/*":["constants/*"],
      "context/*":["context/*"],
      "http/*":["http/*"],
      "hooks/*":["hooks/*"],
      "utils/*":["utils/*"]
    }
  }
}

No se si a todos y todas les sea útil pero aunque sea por curiosidad queda este ejemplo del import del navbar en el about

import Navbar from 'components/navbar'

No me gusta nada que te veas forzado a tener que clonar su repo porque, si no, de otra forma, no sabes como continuar con el proyecto sin utilizar TS. Muy mal planteado.

📬 API en Next.js

<h4>Apuntes</h4>

Para crear una API con Next.js debemos tener una carpeta llamada “api” dentros de pages, en la cual de igual forma podemos agregar archivos que respectivamente se generen sus rutas

Para crear un endpoint debemos tener el archivo

// avo.ts
import { IncomingMessage, ServerResponse } from "http";

const allAvos = (request: IncomingMessage, response: ServerResponse) => {
  response.end(JSON.stringify({ hello: 'world' }))
}

export default allAvos;

El cual podemos acceder desde la ruta

dominio/api/avo

RESUMEN: Para crear una API es necesario crear una carpeta de api en pages y progresivamente ir agregando los archivos deseados


Esta bien pasar a Typescript en el proyecto, mola, pero hubiese sido mejor si en vez de hacerlo desde el repositorio, hubiésemos convertido el proyecto existente en Javascript a Typescript manualmente, así habríamos aprendido como migrar este tipo de proyectos a otras tecnologías y no tener la sensación de que se han sacado las cosas de la chistera.

De igual manera la documentación de Next.js indica como hacerlo o en su defecto seguir los pasos que indica el profesor.

Pues nada, lo de opcional terminó siendo un aobligación porque no pude configurarlo todo con js

hasta aqui llego mi curso. deberian dejar typescrip opcional, o subir un nuevo curso de next js deberian de pensar en No poner tanta dificultad al estudinate por eso estamos aqui.

Aquí el código de cómo se hace en 2022

Que mal tener que ir a aprender typescript solo por decisión del profesor…

Amigos deben clonar el repositorio y hacer checkout al 2do commit, luego hacen exactamente lo que el profe está explicando. Éxitos.

Definitivamente debo de estudiar el curso de GIT

Si alguien esta usando JS y les aparece el error de que no puede leer @database, necesitan tener su archivo api/avo/index.js de la siguiente forma

import Database from "../../../database/db";

const allAvos = async (request, response) => {
    const db = new Database();
    const allEntries = await db.getAll();

    response.statusCode = 200
    response.setHeader("Content-type", "application/json")
    response.end( JSON.stringify({ data: allEntries }) )
}

export default allAvos

Y listo, ese problema debería estar resuelto

deberían enseñar porque instalan o como instalar bien typescript porque usar prettier, los cros entre otros no solo decir clonen sin explicar el porque de instalar y como configurar las nuevas opciones.

Hola. Tengo algunas consultas.
¿Cómo haríamos para usar BD relacionales SQL o alguna otra BD real?
¿NEXT.js protege las API de vulnerabilidades conocidas como SQL injection?
¿NEXT.js tiene una ORM para trabajar con ls BD, como lo tiene Django, Laravel?
Gracias SLDS.

A mi la ruta /api/avo no me aparecía en formato json sino text, para lograr que se viera en formato json, instale el siguiente plugin de chrome JsonView, por si alguno le sirve 😃

length es una palabra reservada en JavaScript, no es una buena práctica ni es recomendado usarla como nombre para una variable…

Para los que deseen ver el Json de respuesta como lo visualiza el profesor les recomiendo instalar la extension para chrome JSON Formatter, Firefox lo hace nativo

Ok eso es para una BD local pero si quieres buscar data de un api de otra aplicación como se haría donde? ejemplo tengo una aplicación en php con un api para consumir datos?

Para los que quieren mantenerse utilizando funciones y no tocar las clases, creamos o modificamos nuestro archivo db.ts por db.js y pegaremos el código a continuación

//db.js
import data from './data';

// Estoy utilizando un objeto llamado Database para seguir simulando un ambiente llamando la base de datos.
const Database = {};

Database.getAll = async () => {
  const asArray = Object.values(data);
  await randomDelay();
  return asArray;
};

Database.getById = async (id) => {
  const entry = data[id];
  await randomDelay();
  return entry;
};

// Modifique el tiempo del delay para simular el tiempo de espera
// Tardara entre 1 a 4 segundos
const randomDelay = () => {
  return new Promise((resolve) => {
    const delay = Math.floor(Math.random() * 4000) + 1000;
    setTimeout(resolve, delay);
  });
};

export default Database;

//api/avo/index.js
import Database from '../../../database/db';

const allAvos = async (req, res) => {
  const data = await Database.getAll();
  res.status(200).json({ data });
};

export default allAvos;

Habrá un curso donde se implemente next js en front y express js como API rest?

Para utilizar TypeScript
npm install --save-dev typescript @types/react @types/node

Si usas npm y quieres hacer un commit, cambia la linea de pre-commit en el package.json.

"pre-commit": "pretty-quick --staged && npm run type-check"

Adicionando TypeScript a nuestro proyecto

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

Copiar

database/data.ts
database/db.ts

#Crear el archivo index.d.ts en la raiz :

type Url = string
type Json =
    | string
    | number
    | boolean
    | null
    | { [property: string]: Json }
    | Json[]

type TProductId = string

type TProductAttributes = {
    description: string
    shape: string
    hardiness: string
    taste: string
}

type TProduct = {
    id: TProductId
    name: string
    sku: string
    price: number
    image: Url
    attributes: TProductAttributes
}

type TAPIAVODetailResponse = TProduct

type TAPIAvoResponse = {
    lenght: number
    data: TProduct[]
    error?: string
}

Sigue el curso creando en pages/api/avo/index.ts

import { IncomingMessage, ServerResponse } from "http";

const allAvos = async (request: IncomingMessage, response: ServerResponse) => {
    response.end(JSON.stringify({ hello: 'world' }))
}
export default allAvos

Primero incita a hacer manual las cosas nada de magia, ahora pide clonar con los cambios realizados

si les sale el siguiente error:
Error: error:0308010C:digital envelope routines::unsupported

aquí está la solución: https://itsmycode.com/error-digital-envelope-routines-unsupported/

La documentacion oficial explica un poco sobre los apis-routes

https://nextjs.org/docs/api-routes/introduction

Instalar yarn:

npm install --global yarn

typescript ??????

Si usan visual studio code

code .

para abrir la carpeta en el editor

digital envelope routines::unsupported

Si alguno de ustedes les marca algun error a la hora de usar el comando “npm run dev” y han seguido los pasos tal y como lo hace el profe. Puede que se deba a un problema con la version de node con la que cuentan ya que al parecer conflictua con Typescript :B (esto normalmente sucede con la version 17).
Mi solución fue desinstalar la version 17 e instalar la versión 16.14.2
Aqui encontré mi respuesta: Solucion a digital envelope routines::unsupported

Como tendria que hacer para continuar el proyecto con lo que ya tenia echo hasta alli y seguir con JS puro?

Comparto el mio con try catch y finally

import { IncomingMessage, ServerResponse } from "http";
import Database from '@database';

const allAvos = async (request: IncomingMessage, response: ServerResponse) => {
    const db = new Database();
    try {
        const allEntries = await db.getAll()
        response.statusCode = 200;
        response.setHeader( 'Content-type', 'application/json' )
    
        response.end(JSON.stringify({ data: allEntries, length: allEntries.length }));
    } catch (error) {
        console.error(error.message);
    } finally {
        console.log("Hecho con exito!");
    }
};

export default allAvos;

Para los que quieran saber como funciona tendran que ver la siguiente documentacion
Object.prototype.hasOwnProperty()

Yo preferi hacerlo con try catch

import { IncomingMessage, ServerResponse } from 'http'
import DB from '@database'

const allAvos = async (request: IncomingMessage, response: ServerResponse) => {
  const db = new DB()
  try {
    const allEntries = await db.getAll()
    response.statusCode = 200
    response.setHeader('Content-type', 'application/json')
    const length = allEntries.length
    response.end(JSON.stringify({ data: allEntries, length }))
  } catch (e) {
    console.error(e.message)
  }
}

export default allAvos

(despues de clonar debemos instalar next js si aparece “next” no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.)

npm install next

Para iniciar el proyecto podemos hacerlo en windows


npm run dev
npm run build

Seria correcto decir que esta funcionalidad nos da la capacidad de usarla como un api proxy?

Código index.ts de la clase:

import { IncomingMessage, ServerResponse } from "http"
import DB from '@database'
const allAvos = async (request: IncomingMessage, response: ServerResponse) => {
    const db = new DB()
    const allEntries = await db.getAll()
    const length = allEntries.length

    response.statusCode = 200 // ok
    response.setHeader('Content-type', 'application/json')
    response.end(JSON.stringify({ data: allEntries, length}))
}

export default allAvos

URL de la API:

https://platzi-avo.vercel.app/api/avo

En la nueva rama creada a partir del tag 2-inicio-api no se va a ver todavía la salida que vemos en la clase, se sigue viendo Home About solamente … no es un error, es que el profesor muestra la página desde main … no la salida de la rama nueva

A mi me descarga algo en vez de mostrarme datos xd

Algun recurso de como conectar Next JS a una DB real?

Yo estoy haciendo 2 proyectos en paralelo porque detesto los proyectos “Platzi esto” “platzi lo otro”.
.
Uno con mi equipo de trabajo, con una API de arte renacentista:
.
Y otro personal con una API de placas de vídeo:
.
Si así lo desean, sientanse libres de forkear cualquiera de los dos!

como le configuro typescrypt a mi proyecto