Álvaro
Álvaro
Comparte:

Entrenamiento Full-Stack con Laravel y NextJS

Hola a todos...
Alguien tiene el problema de realizar la consulta a la API mediante ...
const res = await fetch('http://localhost:8000/api/books')

Remove
Captura de pantalla 2022-11-05 a las 13.34.33.png306.27 KB
Alguien puede indicarme que puede sucederme, sigo los pasos que indica Jorge...
Saludos
Álvaro
Klvstr
Klvstr
Buen día a todos, me genera el mismo problema comentado anteriormente, la API funciona sin problema en el puerto 8000 en la URL :
    http://localhost:8000/api/books

Pero al intentar listar lis libros del lado del cleinte genera un error interno 

En la terminal genera el siguiente error:
----
error - TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11118:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getStaticProps (webpack-internal:///./pages/libros/index.js:13:17)
    at async Object.renderToHTML (/var/www/html/dev/Books/front-end/node_modules/next/dist/server/render.js:384:20)
    at async doRender (/var/www/html/dev/Books/front-end/node_modules/next/dist/server/base-server.js:708:34)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (/var/www/html/dev/Books/front-end/node_modules/next/dist/server/base-server.js:813:28)
    at async /var/www/html/dev/Books/front-end/node_modules/next/dist/server/response-cache/index.js:80:36 {
  cause: Error: connect ECONNREFUSED ::1:8000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 8000
  },
  page: '/libros'
}

---
Y en el Navegador. el siguiente error, ya no pude continuar con el ejercicio.
 

Server Error

TypeError: fetch failed
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source

pages/libros/index.js (4:16) @ async getStaticProps

  2 | export async function getStaticProps(){
  3 | 
> 4 | const res = await fetch('http://localhost:8000/api/books')
    |            ^
  5 | 
  6 | const data = await res.json()
Klvstr
Klvstr
Buen día, respondiendo a la pregunta presentada anteriormente debo decir que fue el mismo Jorge quien me ayuda a resolver este dilema, y aca presento la solución o al menos como yo lo pude solucionar:

Este problema ocurre por la versión de node js, se debe verificar en la terminal que la versión de node ejecutando

 # node -v

Si es la versión 18 entonces es el problema, debe intentarse cambiando a la versión 16 de node que es la que utilizo en el entrenamiento.

Aunque yo lo instale de forma diferente, se recomienda utilizar nvm para manejar las versiones de Node.js

Para WINDOWS https://github.com/coreybutler/nvm-windows

En mi caso especifico con LINUX lo realizamos de la siguiente manera desde la terminal:

Previo al proceso vamos a desinstalar la versión que tengamos, como es mi caso la version 18.x

 # sudo apt remove nodejs 

Si deseamos desinstalar la versión de NodeJs instalada por NVM, primero verificamos la versión actual de NodeJs instalada con el comando que se proporciona a continuación:

# nvm current 

Luego, ejecutamos la sintaxis que se proporciona a continuación para desinstalar cualquier versión específica de NodeJs instalada usando NVM en el sistema:

# nvm uninstall [version-number]

Estoy desinstalando la versión actual de NodeJs, así que primero necesito deshabilitar NVM:

# nvm deactivate 


Ahora ejecuta el comando:

# nvm uninstall 12.1.0 

Aunque siempre hay mas de una forma de hacer el proceso de instalación y configuración, vamos a continuar con el uso de los repositorios o bien como lo he realizado yo, empleando nvm

 Primera forma: Instalar node desde repositorios.

1: actualizamos los paquetes previamente instalados en el sistema:

# sudo apt update 

2. Instalar Node.js 16.x desde el sistema previamente actualizado desde el repositorio necesario:

# curl -sL https://deb.nodesource.com/setup_16.x | sudo bash -
3. una vez agregado el repositorio, procedemos a la instalación de la versión 16.x

# sudo apt -y install nodejs
4. Verificacmos la version instalada:
# nove -v v16.18.1 # npm -v 8.19.2


Seguna forma de instalar node 16.x usando NVM

1. Instalamos NVM. ejecutando el siguiente comando:

2. Cerramos y reabrimos la terminal para iniciar usando nvm mediante los siguientes comandos, uscando la version disponible de Node.Js
# nvm ls-remote
3. Instalamos la versión 16
# nvm install v16
4. Verificamos la instalacion :
# nvm list 
Ahora podremos continuar con nuestro entrenamiento funciona ahora la visualización de los datos de la Bd en el puerto 8000 de la API de Laravel desde el cliente en el puerto 3000 con Next.Js ; atentos saludos.