Preparando la app para el deploy a producció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 ‘env.local’ en la raíz del proyecto, crear la variable con el prefijo ‘NEXT_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!