No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Pr谩ctico de Next.js

Curso Pr谩ctico de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Preparando la app para el deploy a producci贸n

16/22
Recursos

Aportes 8

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Tambi茅n pueden agregar la configuraci贸n a VSC para que al guardar, el linter arregle todos los errores posibles. La configuraci贸n es la siguiente y va en el archivo setting.json de VSC
.

{
	...
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	},
	"eslint.validate": [
		"javascript"
	]
}

.
Y tambi茅n recomiendo Error Lens, la extensi贸n de VSC para visualizar los errores en la misma l铆nea donde ocurre.
.
隆Nunca paren de aprender! 馃挌

Un detalle muy importante es guardar el link de la API en una variable de entorno.
.
En Next.js basta con crear una carpeta 鈥榚nv.local鈥 en la ra铆z del proyecto, crear la variable con el prefijo 鈥楴EXT_PUBLIC_鈥 seguido del nombre que le quieras colocar a la variable y obviamente asign谩ndole un valor.
.
Por ejemplo:

//env.local
NEXT_PUBLIC_NOMBRE-DE-LA-VARIABLE='URL-A-UTILIZAR'

Luego para llamar al url de la API dentro de tu aplicaci贸n:

const API = process.env.NEXT_PUBLIC_NOMBRE-DE-LA-VARIABLE;

Para mas info visiten el siguiente enlace

El profe dandose cuenta que al parecer tenemos como 200 errores con npm run lint jajaja

Este fue el codigo que utilice, ya que la API tiene un error

import { useState, useEffect } from 'react';

const useGetProducts = (API) => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const getPromise = async () => {
      await fetch(API)
        .then((response) => response.json())
        .then((response) => {
          const filteredProducts = response.filter((product) => {
            var RegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!-]))?/;
            if (RegExp.test(product.images[0])) {
              return product.images.length > 0;
            }
          });
          setProducts(filteredProducts);
        })
        .catch((err) => console.log(err));
    };
    getPromise();
  }, [API]);
  console.log(products);
  return products;
};

export default useGetProducts;

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "lint:fix": "eslint src/ --fix"
}

Woa, ni siquiera sab铆a que ESLint pudiera parar un deploy, aprendes de todo en estos cursos

Si alguno tiene el siguiente error:

error Parsing error: Cannot find module 'babel-plugin-styled-components

deben correr en la consola el siguiente comando:

npm add styled-components.macro --dev

Lint es una maravilla. Gracias por el aporte!