¿Cómo crear API con 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

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

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' (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

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

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.

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.

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

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

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

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.

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

📬 API en Next.js

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

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'

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

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

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

Clonando el repo en 2022

Hola! Muchas dependencias han cambiado a la fecha:

• Next está en la versión v12.2
• React v18
• Typescript v4.7
  .
  Para que no tengan problemas al instalar las dependencias les sugiero ejecutar los siguientes comandos:

git clone https://github.com/jonalvarezz/platzi-nextjs
.
cd platzi.nextjs
.
git checkout -b my-api 2-inicio-api // cambiamos de branch antes de instalar dependencias
.
npm install -g npm-check-updates // Esta es una herramienta que deberíamos tener globalmente para actualizar dependencias
.
ncu --upgrade // Esto actualiza el package.json
.
npm install || yarn install  // instala todas las dependencias

Espero les sirva!! Y no se austen por Typescript, es posible hacer el curso sin profundizar en eso.

Definitivamente debo de estudiar el curso de GIT

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.

si estas viendo el curso en el 2022 talvez te muestre un error hacerlo como en el video prueba lo siguiente:

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'
import Database from '../../database/db'

type Data = {
  data: TProduct[],
  length : number
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {

    const db = new Database
    const allentries = await db.getAll();
    const N_Entries = allentries.length
  res.status(200).json({ data: allentries, length:N_Entries })
}

El curso va bien hasta este punto donde la verdad no entiendo el porqué usar TypeScript. Lo ideal sería que se haga con Javascript el curso como se empezó en los ejercicios de las clases pasadas. Se que hay ciertas ventajas de usarlo, pero en este caso debería haber otro curso de Nextjs con TypeScript y así tenemos las opciones según con que nos guste trabajar.
Creo que la idea también es que te hagas los otros cursos así valga la pena tener tantos con tu suscripción, pero si ya uso Javascript y no necesito saber TypeScript para Nextjs…porqué obligarme a usarlo.
Esto es solo una crítica constructiva, el profesor enseña bien y pausado y eso se agradece.

Se perdió un poco el contexto inicial del curso.

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

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

terriblemente malo el inicio del curso… tuve que empezar de cero con todo porque el que enseña se comio tres capitulos. hay dos opciones: o no tiene idea y esta guitarreando o es terriblemete vago para explicar

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

Se nota que sin saber bien Typescript te pierdes como gaviota por Bolivia en esta clase

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

El tipado correcto para los objetos request y response, son los siguientes:

import { NextApiRequest, NextApiResponse } from "next"

const notifications = async (req: NextApiRequest, res: NextApiResponse) => {
	// your code goes here
}

NextApiRequest, posee el body como propiedad.
Esto es necesario para poder trabajar con TypeScript y crear endpoints de tipo POST.

Podrías haber explicado como lo actualizaste TS 😦

Para pasar de javascript (js) a TypeScript (ts):
instala y sigue los siguientes pasos:

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

siguiente paso crea el archivo tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@database": [
        "database/db.ts"
      ]
    },
    "target": "es2016",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

luego el archivo package.json :

{
  "name": "curso_nextjs",
  "author": "@soru13",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "type-check": "tsc --noEmit"
  },
  "keywords": [],
  "license": "MIT",
  "dependencies": {
    "next": "^13.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^18.11.10",
    "@types/react": "^18.0.26",
    "typescript": "^4.9.3"
  }
}

luego en los archivos de la clase llevate la carpeta database
y public

También debes de cambiar la extensión js por tsx, ojo en la carpeta database solo es ts la extensión.
con esto deberías poder continuar.

la api tambien puede ser declarada asi:

import { NextApiRequest, NextApiResponse } from "next";

import Db from "@database";

export default async function (req: NextApiRequest, res: NextApiResponse) {
  const db = new Db()
  const data = await db.getAll()

  res.status(200).json(data)
}

Sin TypeScript
creamos en la raíz del proyecto una nueva carpeta database con un archivo data.js dentro
database/data.js:

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

al mismo nivel creamos otro archivo db.js
database/db.js:

import data from './data';

const Database = {};

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

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

const randomDelay = () => {
  return new Promise((res) => {
    const delay = Math.floor(Math.random() * 2000) + 1000;
    setTimeout(res, delay);
  });
};

export default Database;

una vez listo, creamos dentro de pages una nueva carpeta api, y dentro de ella otra nueva carpeta avo con un archivo index.js dentro
pages/api/avo/index.js:

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

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

export default allAvos

luego solo debemos correr el proyecto

npm run dev 

y añadir a la url ‘/api/avo’ para ver que todo este funcionando correctamente

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;

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.

Entiendo que si van comenzando sea muy frustrante utilizar TypeScript, pero como se mencionó al principio del curso, TypeScript ya no es solo una opción sino los proyectos serios lo están utilizando por las grandes bondades que tiene. Así que les recomiendo aprenderlo, les va a ser de mucha utilizad Una vez que comiencen a utilizar Typescript les aseguro que no van a querer volver a usar Javascript vanilla o puro

Primero: Hace 7 meses cuando entre a este curso por primera vez vi lo de typescript y lo odie, en su momento estaba entrando a primera oportunidad laboral y en la empresa usan next. Que paso ¿? que me asignaron un proyecto de react native y dije para que aprender next si voy a hacer native y lo pospuse, ahora lo estoy retomando y tuve que aprender si o si a usar typescript porque a nivel laboral muy pocos lugares hacen javascript solo… veo demasiadas críticas porque el decide usar typescript pero la verdad es el mejor camino hacer las cosas como las vas hacer en tu trabajo… cuando somos juniors ya estamos agobiados de aprender cosas y creemos que typescript solo complica todo y no es así, yo pase de odiarlo a amarlo… es demasiado necesario y evita muchos errores MUCHOS con una configuración básica.
y por el último este proyecto utiliza next 9 y estamos en la versión 13, yo me he clonado el repo y lo único que tenemos que hacer es ir al package.json y borrar las dependencias y poner esto:

 "dependencies": {
    "next": "^13.0.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },

Eso es para hoy 25 de noviembre, si ya hiciste install borra la carpeta de node modules y vuelve a lanzar npm install, no cambie versión de typescript y ninguna librería más ni prittier con eso levante el proyecto, a ver si más adelante se rompe algo, pero con actualizar la versión debemos tener.

A POR NEXT Y TYPESCRIPT 😄 !!!

Si tienen un error como este:

Error: error:0308010C:digital envelope routines::unsupported

pueden probar creando una variable de entorno así:

// Linux & Mac
export NODE_OPTIONS=--openssl-legacy-provider
// Windows
set NODE_OPTIONS=--openssl-legacy-provider

Me gusta mucho Platzi, y estaba emocionada y siguiendo el curso, pero a estas alturas ya no entendí nada, no me funcionan los codigos. Creo que no esta bien elaborado

Me resultó interesante, ¿Qué casos de uso en una página web tendría crear una API desde Next?
Si alguien tiene algún ejemplo de negocio o así, estaría súper agradecido.

Me parece una idea deplorable que estemos casi obligados a usar Typescript. Entiendo las ventajas, pero no me parece que sea el enfoque correcto en este curso.
Además, primero nos dice que podemos seguir el curso con lo que veníamos trabajando, pero ahora necesitamos empezar a clonar cosas del repo de GitHub… ¿Cómo es eso?
Por último, llegado este punto, parece que se saltearon como cinco clases.

mate al aguate xd

Tuve que dejar este curso, la verdad el salto a typescript genera confusión. Pero no es solo eso, sino que el profesor no marca el tipado correctamente de las interfaces en lugares tan importantes como el database. Porfavor, contemplen cada paso como corresponde.

Me hubiera gustado que desde un inicio se iniciara con typescript, o al meno hubiera explicado como hacer el cambio

agrego una complejidad innecesaria si son las bases es mejor iniciar como estabamos

Si estan usando OSX y el comando yarn dev les da este error:

Error: error:0308010C:digital envelope routines::unsupported

Lo pueden solucionar definiendo la variable de entorno NODE_OPTIONS de esta forma en la terminal:

export NODE_OPTIONS=--openssl-legacy-provider

Sacado de stackoverflow

Instalar yarn:

npm install --global yarn

La documentacion oficial explica un poco sobre los apis-routes

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

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…

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 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"

también ocupan el curso de git para profesionales, eso les ayudará muchisimo

Si alguno desea continuar con JavaScript y despues de hacer todas las configuraciones según el video y otro comentarios y nos les corre. Les recomiendo en su index.js (api/avo/index.js) agregar el codigo de esta forma:

const allAvos = async (request, response) => {
response.status(200).json({hello: ‘World’});
}

export default allAvos;

Es muyyy complejo poder continuar con el proyecto.
No le veo sentido al tener que cambiar y saltar del proyecto que ya habiamos empezado, y continuar usando TypeScript es una locura por que nada de lo que habiamos hecho corre como debe ser.

NextJS tiene mucha tela que cortar. Para quien esté viendo este curso por primera vez, recomiendo dejarse llevar por el profesor y seguir su proyecto. NextJS no lo vas a aprender en un solo curso, puede ser frustrante, pero todo irá cobrando sentido poco a poco.

Lo que sí es cierto es que pudiera haber algún curso donde se cree un proyecto desde cero con NextJS. El tema es que los que están viendo este curso, se supone que ya manejan React. Entiendo el enfoque del curso.

Se ve bastante prometedor 😃
Pero deberíamos poder hacer esa base de datos desde cero en el curso, claro algo bastante sencillo y que se muestre paso a paso como se construyó.
Está excelente que se parta desde un punto más avanzado pero esa experiencia de ‘armar’ algo desde cero es una de las mejores sensaciones que pueden ofrecer los cursos de platzi junto con su bonita comunidad.
Personalmente esa sensación siento que nos aporta el complemento de irnos ‘volviendo profesionales’.

La curiosidad mato al aguacate. jajajaja

ibas muy bien hasta este punto, lo mejor era hacerlo manualmente para aprender de como pasar de js a ts 😦.

Hasta antes de esta clase iba todo bien… ahora se complejizó innecesariamente con TS…

https://www.youtube.com/watch?v=y6pwgEt3yds
como agregar ts en nextjs

En Julio del 2022 estoy siguiendo el curso. Estos pasos me sirvieron para utilizar TypeScript.

1. Agregar las dependencias

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

1. Crear la siguiente estructura del proyecto:

Para poder importar la base de datos, no reconoce el Path directo. La única manera en que logre activarlo quedo de la siguiente manera.

Espero que sea de utilidad para todos y podamos ir continuando el curso 😉.

P.D. Siempre terminen el servidor de NextJS y vuelvan a levantarlo en caso de que algo no funcione.

la extencion del navegador para poder ver los JSON bien se llama JSON Formatter si usan chrome o cualquier navegador basado en chromium pueden instalarlo

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/

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